Jquery自动完成_renderItem无效
作者:专注自由近_515 | 来源:互联网 | 2023-02-02 09:57
如何解决《Jquery自动完成_renderItem无效》经验,为你挑选了1个好方法。
_renderItem根本没有执行,尝试使用console.log也没有打印消息.尝试使用'autocomplete','ui-autocomplete','自动填充'属性没有希望.
另外我无法理解"用地图函数响应"的目的,所以禁用它.
$(document).ready(function () {
myVars.shId = $('#dataVar').attr('sh-data');
///// search ////// http://jsbin.com/xavatajiku/edit?js,output
console.log(myVars.shId);
$('#name-list').autocomplete({
source: function (request, response) {
$.ajax({
url: myVars.czbUrl,
data: { searchText: request.term, maxResults: 10, shopId: myVars.shId },
dataType: "json",
success: function (data) {
console.log(data);
/*response($.map(data, function (item) {
console.log(data);
return {
value: item.product_name,
avatar: item.pfimage_thumb,
rep: item.product_name,
selectedId: item.url
};
}))*/
}
})
},
select: function (event, ui) {
alert(ui.item ? ("You picked '" + ui.item.label)
: "Nothing selected, input was " + this.value);
return false;
}
}).autocomplete( "instance" )._renderItem = function (ul, item) {
console.log('test');
/*var inner_html = ' Reputation: ' + item.volume + '
' + item.product_name + '
';
return $("
")
.data("ui-autocomplete-item", item)
.append(inner_html)
.appendTo(ul);*/
};
HTML:
Reputation: ' + item.volume + '
' + item.product_name + '
')
return $("
").append(item).appendTo(ul);
};
});
如果您的数据返回,请传递给它response()
以确保manmu得到渲染.你不需要,
因为select
将被解雇.
1> Twisty..:
一些小的修改,你应该在路上:
示例:https://jsfiddle.net/Twisty/3gm3sfem/
Javascript的
$(function() {
var myData = [{
product_name: "Name 1",
pfimage_thumb: "thumb1.jpg",
url: "url1"
}, {
product_name: "Name 2",
pfimage_thumb: "thumb2.jpg",
url: "url2"
}, {
product_name: "Name 3",
pfimage_thumb: "thumb3.jpg",
url: "url3"
}];
$('#name-list').autocomplete({
source: function(request, response) {
$.ajax({
url: "/echo/json/",
data: {
json: JSON.stringify(myData)
},
dataType: "json",
type: "POST",
success: function(data) {
console.log(data);
response(data);
}
})
},
select: function(event, ui) {
alert(ui.item ? ("You picked '" + ui.item.label) : "Nothing selected, input was " + this.value);
return false;
}
}).autocomplete("instance")._renderItem = function(ul, item) {
console.log('test');
var item = $(' Reputation: ' + item.volume + '
' + item.product_name + '
')
return $("
").append(item).appendTo(ul);
};
});
如果您的数据返回,请传递给它response()
以确保manmu得到渲染.你不需要,
因为select
将被解雇.