关注jQuery自动完成结果(不一定是第一个) [英] Focus on a jQuery autocomplete result (not necessarily the first)

问题描述

我正在努力扩展jQuery自动完成功能，以使特定项在默认情况下具有焦点.开箱即用的功能可以很好地工作，但是并不完美.使用autoFocus选项，我可以自动专注于第一项.

I am struggling to extend jQuery autocomplete so that a particular item has focus by default. The out-of-the-box functionality works pretty well, but it's not perfect. Using the autoFocus option I can automatically focus on the first item.

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

但是，我想更好地控制重点放在哪个项目上.如果用户键入"eng"，并且我的源返回的相关项目为:

However, I would like to have more control over which item is focused. If the user types in "eng" and the relevant items that my source returns are:

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

• American English
• British English
• English
• Scots English

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

I would like the third item, English, to be in focus by default (i.e., the item that actually begins with the user's input, even though I would like to display the other results). Ideally my source - autocomplete.php - would be able to indicate which item is to be the default focus.

有什么想法吗?我什至不知道如何开始.

Any ideas? I'm not even sure how to start.

推荐答案

有一种简单的方法可以利用 open 事件.您可以让客户端代码句柄选择默认项，或者发送带有您要选择的项的额外属性.我将介绍两个选项:

There's a simple way to accomplish this, leveraging the open event. You can have client side code handle choosing the default item, or send down an extra property with the item you want selected. I'll go over both options:

$("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);
        }
    }
});

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

Basically the idea is to do the following when the autocomplete's menu is open:

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

示例: http://jsfiddle.net/J5rVP/40/(尝试搜索 E nglish或 S 婴儿床英语)

Example: http://jsfiddle.net/J5rVP/40/ (Try searching for English or Scots English)

该代码使用本地数据源，但它与远程数据源也应该很好地工作.

The code uses a local data source but it should work just as well with a remote source.

扩展上面的示例，您可以调整向下发送数据的方式，以便在每次搜索时，服务器端代码都会确定要选择的项目.您只需在希望选择的项目上指定一个附加属性即可完成此操作.例如，您的JSON响应可能如下所示:

Extending on the above example, you could tweak the way you're sending data down, so that on each search your server-side code decides which item to select. You can do this by simply specifying an additional property on the item you wish to have selected. For example, your JSON response could look something like this:

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

请注意美国英语"上的select属性.这表示要自动完成，我们默认要选择该项目.

Note the select property on "American English." This indicates to autocomplete that we'd like to select that item by default.

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

Then you would update your widget initialization code to tap into the open event like above. This time though we're just searching for an item with the select property:

$("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/

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

Note that in the above example American English is always selected. Since autocomplete issues a new request each time the user types, your server would respond with different suggestion data and therefore a different selected item.

我也不知道PHP，所以我不能说您将如何实现将select属性添加到JSON.不过，这似乎很简单，甚至看起来像第一个使用正则表达式的示例中的JavaScript代码.

Also I don't know PHP so I can't speak to how you would implement adding the select property to the JSON. Seems like it would be pretty simple though, and might even look like the JavaScript code in the first example that uses a regular expression.

这篇关于关注jQuery自动完成结果(不一定是第一个)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！