Question

我在选择或焦点功能时遇到了很多麻烦。一旦扩展结果，我甚至无法在选择中杀死结果。我阅读了很多关于某些版本的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);
  };

});

Answer 1

我认为你只是有一些小问题（后果非常严重）

在您覆盖的_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

jQuery UI自动完成选择事件不起作用

1 个答案: