jQuery Autocomplete with multiple inputs

Question

I have an autocomplete field which I would like to augment by providing a drop down for categories as well, in the hopes that this makes it even easier to search on. This would take the category id from the drop down and then pass this in along with the search text to my server side Autocomplete Function.

I am using the jQuery autocomplete plugin found here:

http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

The demo page is here:

http://jquery.bassistance.de/autocomplete/demo/

Perhaps this is already explained in the demo somehow, but I'm just not seeing it. I am able to get the data out from JSON and split it into multiple fields.

It doesn't matter much, but I am using ASP.NET MVC as well.

Answer 1

The first parameter of the autocomplete plugin can be an array or a url. All you would have to do is supply your category id as a query string parameter to your autocomplete function.

var selectedCategory = $('.categories').val();
var query = '';
if (selectedCategory !== 0)
{
   query = '?category=' + selectedCategory;
}
$("#suggest4").autocomplete('search_service.svc' + query, {
   // options   
});

Hope this helps.

Answer 2

Previous Answer is 1/2 correct. The problem is that when .autocomplete() is called, the url + query are evaluated immediately which means that the current selected category value will ALWAYS be used when autocomplete is called. That means that if the user selected a different category, the new value will not be passed on the query commandline.

See this blog entry for my patch that allows you to pass a function instead of a url, and still use code similar to bendewey's example above.

jquery-autocomplete-other-fields

Note: I tried to post the patch here, but it was all messed up.

Eric

Answer 3

better solution is add extraParams callback function to your params

extraParams: {
  data: function(){ return new Date().getTime() }
},