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

我在选择或焦点功能做出响应时遇到了很多麻烦。我不能在选择结果后再杀死结果。我读了很多关于与主jQuery库冲突的某些版本的jQuery UI，但几乎任何组合似乎都不起作用。更糟糕的是，它不会在控制台中抛出任何错误。选择/重点下面的所有东西似乎都很好。我为每个项目添加了一些HTML，并且在我的应用程序中，我根据类为他们设计了不同的样式。我想使用select在输入本身下面使用ui.item.label附加一些额外的HTML（如标记系统）。在此期间，我只是使用警报进行故障排除。jQuery UI自动完成选择事件不起作用

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

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

});

来源

2013-05-07 Matthew K. Turner

我觉得你只是有一些小问题（有相当庞大的后果）

在您覆盖您尝试使用<span>标签的元素追加你_renderItem功能，但你需要将它们定义为<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-07 18:12:19 SirDerpington

是！这很奇怪。这样一个小问题，但现在呈现的HTML是完全不同的。那样做了。 – 2013-05-07 18:23:31

我很高兴我帮你。快乐编码;） – SirDerpington 2013-05-07 18:31:30

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

回答

相关问题