jquery - 关注 jQuery 自动完成结果(不一定是第一个)

Question

我正在努力扩展 jQuery 自动完成功能，以便特定项目默认具有焦点。开箱即用的功能运行得很好，但并不完美。使用 autoFocus 选项，我可以自动聚焦于第一个项目。

$( "#input" ).autocomplete({
    source: "autocomplete.php",
    minLength: 1,
    autoFocus: true
});

但是，我希望更好地控制重点关注的项目。如果用户输入“eng”并且我的源返回的相关项目是:

• 美式英语
• 英式英语
• 英语
• 苏格兰英语

我希望第三个项目，英语，默认成为焦点(即实际上以用户输入开始的项目，即使我想显示其他结果)。理想情况下，我的源代码 - autocomplete.php - 将能够指示哪个项目是默认焦点。

有什么想法吗？我什至不知道如何开始。

Answer 1

有一个简单的方法可以实现这一点，利用 open事件。您可以让客户端代码处理选择默认项目，或发送包含您想要选择的项目的额外属性。我将详细介绍这两个选项:

以术语开头的建议焦点，在客户端上选择:

$("input").autocomplete({
    source: /* ... */,
    open: function (event, ui) {
        var menu = $(this).data("uiAutocomplete").menu
            , i = 0
            , $items = $('li', menu.element)
            , item
            , text
            , startsWith = new RegExp("^" + this.value, "i");

        for (; i < $items.length && !item; i++) {
            text = $items.eq(i).text();
            if (startsWith.test(text)) {
                item = $items.eq(i);
            }
        }

        if (item) {
            menu.focus(null, item);
        }
    }
});

基本上，想法是在自动完成菜单打开时执行以下操作:

• 构建正则表达式来查找以搜索词开头的单词。
• 迭代每个菜单项并根据正则表达式测试其文本。如果我们找到匹配项，则停止迭代并存储该值。
• 如果我们检索到一个值，请使用 focus菜单上的方法来突出显示该项目。

示例: http://jsfiddle.net/J5rVP/40/ (尝试搜索English 或Scots English)

该代码使用本地数据源，但它应该与远程数据源一样工作。

<小时/>

以术语开头的建议焦点，在服务器上选择

扩展上面的示例，您可以调整向下发送数据的方式，以便在每次搜索时您的服务器端代码决定选择哪个项目。您可以通过简单地为您希望选择的项目指定一个附加属性来完成此操作。例如，您的 JSON 响应可能如下所示:

[{"label":"American English","select":true},{"label":"British English"},{"label":"English"},{"label":"Scots English"}]

请注意“美式英语”上的select 属性。这表示自动完成我们希望默认选择该项目。

然后您将更新您的小部件初始化代码以利用上面的 open 事件。这次我们只是搜索具有 select 属性的项目:

$("input").autocomplete({
    source: "autocomplete.php",
    open: function (event, ui) {
        var menu = $(this).data("uiAutocomplete").menu,
            i = 0,
            $items = $('li', menu.element),
            item,
            data;

        for (; i < $items.length && !item; i++) {
            data = $items.eq(i).data("ui-autocomplete-item");
            if (data.select) {
                item = $items.eq(i);
            }
        }

        if (item) {
            menu.focus(null, item);
        }
    }
});

示例: http://jsfiddle.net/J5rVP/42/

请注意，在上面的示例中，始终选择美国英语。由于每次用户键入时自动完成功能都会发出新的请求，因此您的服务器将使用不同的建议数据进行响应，从而响应不同的选定项目。

此外，我不了解 PHP，因此无法说明如何将 select 属性添加到 JSON。不过看起来似乎非常简单，甚至可能看起来像第一个使用正则表达式的示例中的 JavaScript 代码。