jquery - 找不到结果时如何至少在 JqueryUI 自动完成面板中显示一个项目

Question

当找不到匹配项时，我试图强制 jqueryUI 自动完成的面板/列表至少显示一个默认项目（例如“添加新项目”）。该项目也必须能够与某些事件处理程序绑定。

到目前为止，我已经尝试通过在发现真正的 AC 面板隐藏时添加一个伪 AC 面板来克服这个问题。

我还想知道是否可以动态更新“源”（在 jqueryui.autocomplete 的选项中），将项目插入数据集，以便文本框中的任何类型都将被检测为匹配并因此被显示。（对不起，这部分真的很难解释）。

有没有更好的方法来实现这一目标？

Answer 1

您可以覆盖 _renderItem 函数并自己显示并添加“添加新项目”文本。

像这样：（警告未经测试）

$('#yourinputelementid').data( "autocomplete" )._renderMenu: function( ul, items ) {
        var self = this;
        $.each( items, function( index, item ) {
            self._renderItem( ul, item );
        });
        var newitem = $( "<li>Add New Item</li>");
        newitem.click(function(event) {
            alert("newitem test");
        });
        self.append(newitem);
    }
.data( "autocomplete" )._renderItem = function( ul, item ) {
    return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
        .appendTo( ul );
};

看这里

Answer 2

我使用远程数据源解决了问题。（http://jqueryui.com/demos/autocomplete/#remote）

当没有找到结果时，只需通过 ajax 传递一个项目（默认项目，来自服务器）。

解决了！