[英]jquery ui autocomplete not showing result
所以我使用的是jQuery ui autocomplete而不是combobox,以使用户可以更轻松地从数据库中选择数百种产品。
$(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告诉我php成功生成了请求的数据,如下所示。
[
{"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"}
]
但是以某种方式,结果没有显示。
有任何想法吗?
我从http://jqueryui.com/demos/autocomplete/#custom-data复制了部分代码。 我已经测试了示例,并且可以正常工作。
好的,我不太了解如何以及为什么,但是碰巧我需要创建自动完成文本框的克隆。 为此,我使用live()来让jquery捕获新克隆事件。 我将上面的代码修改为如下所示:
$(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);
};
})
});
如我所说,我不知道如何以及为什么,但是自动完成结果确实显示出来。 感到有些放心。 但是由于我必须了解自己的工作,所以我认为我必须弄清楚解释。
想法?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.