2

我在选择或焦点功能响应时遇到了很多麻烦。展开结果后，我什至无法杀死选择中的结果。我阅读了很多关于某些版本的 jQuery UI 与主 jQuery 库冲突的信息，但几乎任何组合似乎都不起作用。更糟糕的是，它不会在控制台中引发任何错误。选择/焦点下方的所有内容似乎都可以正常工作。我将一些 HTML 附加到每个项目，并且在我的应用程序中，我根据一个类对它们进行不同的样式设置。我想使用 select 在输入本身下方使用 ui.item.label 附加一些额外的 HTML（如标记系统）。在此期间，我只是使用警报进行故障排除。

这是一个有我一半工作代码的小提琴。

http://jsfiddle.net/c3UM5/

$(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);
  };

});
4

1 回答 1

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
于 2013-05-07T18:12:19.037 回答