I spent a lot of time, to add additional parameters to the Jquery-Autocomplete-Source. But I can’t get it finished.
What I’m trying to do: I have an autocomplete form with a jQuery datasource. If you select something from the autocomplete, it will be inserted into a table (text and a hidden field with the id) and the function lesen is started (works fine). Function lesen reads the value of every element with the “class” nutzerid (the hidden field) to an array and puts it to an input field – the input field is the collector for all ids(works!). BUT! The autocomplete should read the value of this field an send it as a parameter to my JSON source. But it doesn’t. The Firebug console shows an empty parameter. Even though an alert is able to show the value. I really don’t know, what I’m doing wrong.
I also tried to replace the input field (collector of all ids) by a variable. But the same problem occurs here. I can alert the value of the var. But trying to attach it to the source produces an empty param. I also tried to give the value to autocomplete via param, extraparams option. No success. I think there is a problem with joining the array. Maybe the step in lesen where all ids are pushed to an array and the array is filled into the form. But I’m out of ideas how to solve this.
Why i’m doing this? I want the JSON source PHP to exclude the already selected ids in its MySQL query. What has been selected one the previous requests should not be displayed with autocomplete anymore. So I have to post, what was added to the requesting page before. And this is the way (probably not the cleanest) I’ve chosen. Imagine a shopping cart. If a product is attached to the shopping cart, it should not be displayed in future requests. Of course I’m open to new approaches.
<input type="text" id="ausschluss" />
$(document).ready(
function() {
//this functions reads every hidden field (form the added items) an puts the array as string to a hidden field
function lesen(){
var itemsarray = [];
$(".nutzerid").each(function () {
var items = $(this).attr('value');
itemsarray.push(items);
});
$( "#ausschluss" ).val(itemsarray);
};
//this function attaches the selection (from the autocomplete) to a table it creates text, a hidden field with the user id and a button
function log( name, id ) {
$("<tr> <td>" + name + "<input class='Entf' type='button' value ='Entfernen' />" + "<input type='hidden' class='nutzerid' name='hiddenField' value='" + id + "' /></td></tr>").appendTo("#log");
$( "#log" ).attr( "scrollTop", 0 );
lesen();
}
//this is the autocompletepart
$( "#REMOTE" ).autocomplete({
source: "json.php?aus=" + $( "#ausschluss" ).val(), //this is not working. the firebug console shows an empty param (.php?aus=&term=blabla
minLength: 2,
select: function( event, ui ) {
log(ui.item.value,ui.item.id);
alert($( "#ausschluss" ).val()); //this works! after selecting an item from the autocomplete it shows me the value of the field "ausschluss", like it should be appended to the source
}
});
//this one captures the click of a button. identified by the class and kills the <tr> <td> and all elemtns in it
$('.Entf').live('click',function(event){
$(this).parent().parent().remove();
lesen();
});
});
The jQueryUI autocomplete control – much like the dialog – is created using the
$('#myElement').autocomplete()initialiser.Your problem is happening because you are initialising the autocomplete once using
$('#ausschluss').val(), which hasn’t been populated yet. The autocomplete will not refer back to that value again – it is effectively cached. You need to refactor your code to pass the ausschluss to a function as a variable, and have that function then call autocomplete or (probably better), try to set the source on the fly like so:You’d call this whenever your ausschluss value changed.