i am using Ajax Autocomplete for Jquery
( http://www.devbridge.com/projects/autocomplete/jquery/ ) in one of my application. The Search Form looks something like this :
<form id="topsearch" method="POST" action="/searchAll"><input type="text" class="searchform" name="q" id="q" value="Country, City, Hotel or a Tourist Attraction" o nfocus="clearInput(this);" onblur="defaultInput(this);" />
<select id="top_search_select" name="entity_type">
<option value="country">Countries</option>
<option value="city">Cities</option>
<option value="place" selected="selected">Tourist Attractions</option>
<option value="hotel">Hotels</option>
</select>
<input type="submit" name="topsearch" class="submit" value="SEARCH" title="SEARCH"/>
</form>
and the autocomplete configuration looks like this:
<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);},
});
//]]>
</script>
Now the problem is in the backend i have different handlers that generate results for different types of entity that user would choose through the select option in the form.
By Default entity_type
is place
which is being passed just fine to the handler in the backend. However, what i want is when a person selects a different entity from the select box in the form params: {entity_type:$('#top_search_select').val()}
in the script configuration also gets updated.
Any help or ideas will be much appreciated. Thanks.
The setOptions method worked, though we need to call it on the selects change method. So change script to:
and On document ready function add this :
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:
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:
Because as mentioned in other answers the value get static.
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 theparams
options each time user selects a different value likeYou should put all your code inside
document ready
.Alternatively, you can specify the params using a function which is evaluated just before the ajax request is sent.
Might be an old question, but I feel that here's the best way to do it:
Pez's answer didnt work for me just a slight variation with 'extraParams'. This makes the parameters dynamic rather than set on page load...