我在选择或焦点功能时遇到了很多麻烦。一旦扩展结果,我甚至无法在选择中杀死结果。我阅读了很多关于某些版本的jQuery UI与主jQuery库冲突的内容,但几乎任何组合似乎都不起作用。更糟糕的是,它不会在控制台中抛出任何错误。选择/焦点以下的所有内容似乎都能正常工作。我在每个项目中附加一些HTML,在我的应用程序中,我根据类别设置不同的样式。我想使用select在输入本身下方使用ui.item.label附加一些额外的HTML(如标记系统)。我只是在此期间使用警报进行故障排除。
这是一个有我半工作代码的小提琴。
$(function () {
var availableItems = [{
value: "recent",
label: "Recent",
classN: "heading"
}, {
value: "all",
label: "All",
classN: "all"
}, {
value: "lorem",
label: "Lorem",
classN: "lorem"
}, ];
$(".post-to").autocomplete({
source: availableItems,
minLength: 0,
focus: function (event, ui) {
$('.post-to').val(ui.item.label);
alert(ui.item.label);
return false;
},
select: function (event, ui) {
alert(ui.item.label);
return false;
}
}).on("focus", function () {
$(this).autocomplete("search", '');
}).data("ui-autocomplete")._renderItem = function (ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<span class='" + item.classN + "'></span><span>" + item.label + "</span>")
.appendTo(ul);
};
});
答案 0 :(得分:4)
我认为你只是有一些小问题(后果非常严重)
在您覆盖的_renderItem
函数中,尝试使用<span>
标记附加元素,但您需要将其定义为<a>
标记。
查看代码的 updated jsfiddle 。
我刚刚改变了这个:
$(".post-to").autocomplete()
.data("ui-autocomplete")._renderItem = function (ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
//instead of <span> use <a>
.append("<a class='" + item.classN + "'></a><a>" + item.label + "</a>")
.appendTo(ul);
};
警报现在正常工作!
我猜这个“限制”是由于风格附加的元素正确。如果查看应用的样式,则会为<a>
标记定义它们。像
.ui-menu .ui-menu-item a
.ui-widget-content a