Autocomplete - set hidden field value
Hi. I am having difficulty figuring out why my autocomplete script doesn't update a hidden form field value (ShopId). Specifically, I can't seem to get the id value with ui.item.id in the select: function.
Here's the inputs:
<input type="checkbox" id="cbox-exp-shops" checked="checked" value="expshops" />
<input type="text" id="ShopsList" name="ShopsList" maxlength="16" />
<input type="hidden" id="ShopId" name="ShopId" value="" />
<input type="submit" class="go" id="button1" value="Go" />
Here's the jQuery:
- $(document).ready(function()
{
$('#ShopsList').autocomplete({
source: function(request, response) {
var expshops = $("#cbox-exp-shops:checked").val();
$.ajax({
url: "ajax_shop_id.php",
dataType: "json",
data: {
q: request.term,
exclude: expshops
},
success: function(data) {
//map the data into a response that will be understood by the autocomplete widget
response($.map(data, function(item) {
if(item.stat=='exp'){
return {
label: '<img src="redx-16x16.png">'+item.id+' - '+item.name+', '+item.addr+', '+item.city,
value: item.id+' - '+item.name
}
}
else if(item.stat=='dis'){
return {
label: '<img src="red-16x16.png">'+item.id+' - '+item.name+', '+item.addr+', '+item.city,
value: item.id+' - '+item.name
}
}
else if(item.stat=='fullres'||item.stat=='res'||item.stat=='inc'||item.stat=='corp'){
return {
label: '<img src="amber-16x16.png">'+item.id+' - '+item.name+', '+item.addr+', '+item.city,
value: item.id+' - '+item.name
}
}
else{
return {
label: '<img src="green-16x16.png">'+item.id+' - '+item.name+', '+item.addr+', '+item.city,
value: item.id+' - '+item.name
}
}
}))
}
})
},
minLength: 3,
select: function(e, ui) {
//$("input#ShopId").val("testval1"); // works
//$("input#ShopId").val(ui.item.id); // nope
$("input#ShopId").val($.data(ui.item.id)); // nope
return false;
}
});
});