Question

我的文本字段有一个自动完成的jQuery功能，建议使用编程语言：

Java
C++
PHP

一旦用户点击建议，就会调用一个回调函数，该函数设置由ajax请求获取的语言的隐藏ID。

问题是，如果用户手动写入语言名称（没有单击自动完成），则不会调用此回调函数，因此不会设置隐藏ID - 我必须搜索它按名称在数据库中。

有没有一种实用的方法来处理这类问题？

Answer 1

如果您使用的是本地数据源，这非常简单 - 只需查看用户的条目是否在源数组中：

$("#auto").autocomplete({
    source: availableTags,
    change: function(event, ui) {
        if (ui.item) {
            /* User selected an item. value is ui.item.value */
        } else {
            if ($.inArray(this.value, availableTags) >= 0) {
                /* User typed item in suggestion list. value is this.value. */
            } else {
                /* User typed something that wasn't in the suggestion list */
            }
        }
    }
});

示例： http://jsfiddle.net/andrewwhitaker/PNqkB/

你也可以使用ScottGonzález'autoSelect plugin（demo）。使用插件的优点是它应该处理远程源，我的示例只处理本地源。

以下是使用远程数据源的Scott插件的示例：http://jsfiddle.net/ZEzMa/

Answer 2

您使用的是jQuery.ui.autocomplete插件http://jqueryui.com/demos/autocomplete/#default吗？如果是，您可以使用change，close和search事件来处理您想要的内容。这绝对不是理想的，但插件并不能满足您的需求。我认为这可以作为他们的错误跟踪器上的问题报告：）

Answer 3

jQuery autocomplete有select事件，只要您使用鼠标或键盘从自动填充列表中选择任何项目，就会触发该事件。

如果您只是在没有从自动填充列表中选择项目的情况下键入文本框，则select将不会触发。

如果您只将所选文本存储在隐藏字段中，那么我建议您从文本框值本身获取它。

Answer 4

由于jQueryUI 1.9 response event可用。您可以检查搜索结果是否返回单个项目。如果是这样，您可以将id分配给隐藏字段。在我的例子中，citiesData是一个调用Web Api的函数。

$("#auto").autocomplete({
    source: citiesData,
    select: fillValues,
    search: function (event, ui) {
        $("#hdnField").val(null); //removes id if previously selected
    },
    response: function (event, ui) {
        if (ui.content.length === 1) { //set id and label if only one item is found
            $("#txtField").val(ui.content[0].label);
            $("#hdnField").val(ui.content[0].value);
        }
    }
});

jQuery自动完成：如果用户写下匹配，则不会调用回调函数

4 个答案: