jQuery UI 自动完成：自定义数据获取问题

Question

我在我自己的项目中尝试了这个 jQuery UI 演示，发现需要对它进行必要的修改。请参阅下面的演示：

http://jqueryui.com/demos/autocomplete/#custom-data

在这个例子中，当我们输入“j”并选择任何一个选项时，它会获取一些与之相关的文本和徽标。哪个工作正常。在这里，假设我们从给出的自动建议中选择“jQuery”。它将在左侧加载文本和 jQuery 徽标。但是假设这样做之后，如果我们从文本框中删除单词“jQuery”的一些字符，那么它应该重置并显示空白输出。但它仍然是之前加载的相同文本和徽标。

一般来说，我想做的是，用户必须从自动建议中选择一些东西，而不是写任何不在自动建议中的东西。

我们该怎么做？

提前致谢。

Answer 1

您可以覆盖选择和更改事件来实现此目的：

 $(".combobox").autocomplete({
    minLength: 0,
    source: function (request, respond) {
        //some source
    },
    change: function (event, ui) {
        //if no value inside the LI, reset the input -> uses a custom selector
        if ($(".ui-autocomplete li:textEquals('" + $(this).val() + "')").size() == 0) {
            $(this).val('');
    },
    select: function (event, ui) {
        $(this).val(ui.item.Name);
    }
 );

您只需要一个自定义选择器来比较文本输入：

$.expr[':'].textEquals = function (a, i, m) {
    return $(a).text().match("^" + m[3] + "$");
};