Ajax Autocomplete for Jquery : How To Send Dynamic Parameters

Question

i am using Ajax Autocomplete for Jquery ( http://www.devbridge.com/projects/autocomplete/jquery/ ) in one of my application. The Search Form looks something lik

Answer 1

All the answers above did NOT work for me (I suspect because I'm passing "POST" data through ajaxSettings variable which might affect "params" but I did not double check).

Anyway all comments gave good hints and I came up with the following:

var data={          
    'phrase': function() {
        return $('#ajax_post').val();
    },
    'activity_id': function() {
        return $('#activity_id').val();
    }
}

var options = {
    noCache: true,
    transformResult: function(response) {
        //whatever
    },
    onSelect: function(suggestion) {
        //whatever
    },  
    serviceUrl: "MyPHP.php",
    ajaxSettings: {
        dataType: "json",
        method: "POST",
        data: data
    }
};  

$("#ajax_post").autocomplete(options);

So I was able to deliver to the PHP script both the content of ajax_post and activity_id input fields.

Note that it's not enough to do:

'phrase': $('#ajax_post').val()

Because as mentioned in other answers the value get static.

Answer 2

Pez's answer didnt work for me just a slight variation with 'extraParams'. This makes the parameters dynamic rather than set on page load...

$("#field").autocomplete('pageurl.php', {     
   width: 240,
   matchContains: true,
   mustMatch: false,
   selectFirst: false,
   extraParams: {
      start:function () { 
           return $("#start_date").val(); 
      },
      end: function () {
           return $("#end_date").val() ;
      }
  } 
});

Answer 3

Alternatively, you can specify the params using a function which is evaluated just before the ajax request is sent.

$('#q').autocomplete({
    ...
    params: {
        'entity_type': function() {
            return $('#top_search_select').val();
        }
    }
    ...
});

Answer 4

Might be an old question, but I feel that here's the best way to do it:

$('#q').autocomplete({
    ...
    onSearchStart: function(q) {
        q.entity_type = $('#top_search_select').val();
    }
    ...
});

Answer 5

As your plugins site specifies in the usage here http://www.devbridge.com/projects/autocomplete/jquery/ it has a setOptions method on the object it returns which you can use later to change options dynamically.

Add a onchange handler on the select element and change the params options each time user selects a different value like

$(function(){
  var ac = $('#q').autocomplete({
    serviceUrl:'/search',
    delimiter: /(,|;)\s*/, // regex or character
    maxHeight:400,
    width:325,
    zIndex: 9999,
    params: {entity_type:$('#top_search_select').val()},
    deferRequestBy: 0, //miliseconds
    noCache: false, //default is false, set to true to disable caching
    onSelect: function(value, data){window.location.replace(data);},
  });

  $("#top_search_select").change(function() {
      ac.setOptions({params:{entity_type:$(this).val()}});
  });


});

You should put all your code inside document ready.

Answer 6

The setOptions method worked, though we need to call it on the selects change method. So change script to:

<script type="text/javascript">
//<![CDATA[
  var a = $('#q').autocomplete({
    serviceUrl:'/search',
    delimiter: /(,|;)\s*/, // regex or character
    maxHeight:400,
    width:325,
    zIndex: 9999,
    params: {entity_type:$('#top_search_select').val()},
    deferRequestBy: 0, //miliseconds
    noCache: false, //default is false, set to true to disable caching
    onSelect: function(value, data){window.location.replace(data);},
  });
  a.setOptions({params:{entity_type:$('#top_search_select').val()}});
//]]>
</script>

and On document ready function add this :

$("#top_search_select").change(function() {
  a.setOptions({params:{entity_type:$('#top_search_select').val()}});
});