First attempt at Remote Search doesn't work

[swisspenParticipant]

Hello

I am a total fan of Jqwidgets, however I don’t always understand how to use them first time round, and this is one case.

My Remote Search – based on your nice Geonames example, gets a list of json data from my db. I display this in my list box, based on the json, and that works fine, outputting the data as specified in the creation of the jqxListBox:

var label = item.member_id + " " + item.last_name + " " + item.first_name + ", " + item.email + ", " + item.address_zipcode;

The problem is that nothing happens when I type in my Searchfield. For the list box I have set

displayMember: "last_name",
valueMember: "member_id",

but when I type in 2 or more chars, nothing happens – no change in the list of names. The searchField event function I am using is:

$("#searchField").bind('keydown', function (event) 
		{
			if ($("#searchField").val().length >= 2) 
			{
				if (me.timer) clearTimeout(me.timer);
				me.timer = setTimeout(function () 
				{
					dataAdapter.dataBind();
				}, 300);
			}
		});

and yes, my input field is indeed named searchField.

What have I misunderstood here?
Thanks in advance
SP

[VladimirParticipant]

Hello swisspen,

In the given example with the geonames, there is a function

         formatData: function (data) {
                        data.name_startsWith = $("#searchField").val();
                        return data;
                    }

This function sets the name_startsWith request parameter to the geoservice, to match the values in the searchField.
So in order for your code to actually do anything, the service needs to accept a filtering parameter that you should set in the formatData function, so that it is passed to the server when the request is made.

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[swisspenParticipant]

Sorry Vladimir, I forget to include that piece of my code … I have it already:

var dataAdapter = new $.jqx.dataAdapter(source,
		{
			formatData: function (data) 
			{
				data.name_startsWith = $("#searchField").val();
				return data;
			}
		});

At first I thought that it did not understand data.name_startsWith, because my displayMember is “last_name”, but even when I changed it to
data.last_name_startsWith = $("#searchField").val();

it still did not work! I must be missing something else ….

[VladimirParticipant]

Hello swisspen,

I think you misunderstood me.

This field must be processed by the remote server.
It is a request parameter (sent with the request to get data from remote server), that tells the server to return resulsts starting with the value.

It is similar to the get parameter of a webpage i.e. http://mysite/myservice?name_startswith=mystring

So if your remote server accepts a request parameter that would cause it to return filtered or otherwise modified results, the formatData function is the place to specify it.

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[swisspenParticipant]

aHa! Now I think I see – I need my server-side SQL to have a SElECT last_name WHERE last_name LIKE “n%” statement …

Is that what you mean?

[VladimirParticipant]

Hello swisspen,

Yes.
This is why the example is “remote” search.

Best Regards,
Vladimir

jQWidgets Team
http://www.jqwidgets.com

[swisspenParticipant]

Okay, got it! I misunderstood something I read, and thought that that the function above was doing something behind-the-scenes (hosted on your server). If it’s under my control that’s perfect.

Thanks very much for your help.
SP

[Author]

Posts