jquery ui autocomplete not showing result
so i'm using jquery ui autocomplete instead of combobox to make it easier for my users to select hundreds of products from database.
$(function() {
$(".autocomplete").autocomplete({
source: function(request, response) {
$.ajax({
'url': "http://localhost/project/index.php/product/search_data/",
'data': { 'txt_product_name': $('#txt_product_name').val()},
'dataType': "json",
'type': "POST",
'success': function(data){
response(data);
}
})
},
minLength: 2,
focus: function( event, ui ) {
$(".txt_product_id").val(ui.item.product_id);
return false;
},
select: function( event, ui ) {
$( ".txt_product_id" ).val(ui.item.product_id);
$( ".txt_product_code" ).val(ui.item.product_code);
$( ".txt_product_name" ).val(ui.item.product_name);
return false;
}
}).data("autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.product_code + "<br>" + item.product_name + "</a>" )
.appendTo(ul);
};
});
firebug tells me that php successfully generates requested data, like below.
[
{"product_id":"92","product_code":"TURE3052","product_name":"Choose Your Own Adventure"},
{"product_id":"89","product_code":"UMPS3447","product_name":"Goosebumps"},
{"product_id":"15","product_code":"ROSE7302","product_name":"The Name of the Rose"},
{"product_id":"开发者_开发技巧34","product_code":"LIFE1226","product_name":"The Purpose Driven Life"}
]
but somehow, the result does not show.
any ideas?
i copied parts of the codes from http://jqueryui.com/demos/autocomplete/#custom-data. i have tested the example and it worked.
ok, i don't quite understand how and why, but it so happened that i need to create clones of the autocomplete textbox. for that purpose, i use live() in order for jquery to catch the event of new clone. i modify the above code to look like below:
$(function() {
$(".autocomplete").live('keyup.autocomplete', function() {
$(".autocomplete").autocomplete({
source: function(request, response) {
$.ajax({
'url': "http://localhost/project/index.php/product/search_data/",
'data': { 'txt_product_name': $('#txt_product_name').val()},
'dataType': "json",
'type': "POST",
'success': function(data){
response(data);
}
})
},
minLength: 2,
focus: function( event, ui ) {
$(".txt_product_id").val(ui.item.product_id);
return false;
},
select: function( event, ui ) {
$( ".txt_product_id" ).val(ui.item.product_id);
$( ".txt_product_code" ).val(ui.item.product_code);
$( ".txt_product_name" ).val(ui.item.product_name);
return false;
}
}).data("autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.product_code + "<br>" + item.product_name + "</a>" )
.appendTo(ul);
};
})
});
as i say, i don't understand how and why, but the autocomplete result does show up. felt a little relieved. but since it is a must for me to understand my own work, i think i have to figure out the explanation.
ideas?
精彩评论