jQuery UI的自动完成构件搜索配置 [英] jQuery UI Autocomplete widget search configuration

问题描述

我在寻找到使用 jQuery用户界面自动完成小部件落实名字或姓氏用户查找。它看起来像在默认情况下自动完成查找由字符序列的话，无论其发生在一个字。所以，如果你有这样的数据：的JavaScript，ASP，哈斯克尔，你在 键入'为'你将得到所有三。我会把它想至少比赛开始的本字。因此，在上面的例子中，你得到的只是ASP。有没有配置自动完成构件做到这一点的方法吗？

I'm looking into using the jQuery UI autocomplete widget to implement user lookup by first or last name. It looks like by default autocomplete looks up words by character sequence no matter its occurrence in a word. So if you have data such as: javascript, asp, haskell and you type in 'as' you will get all three. I would like it to at least match beginning of the word. So in above example you get only 'asp'. Is there a way to configure the autocomplete widget to do this?

它最终甚至会更好，以<一个href=\"http://stackoverflow.com/questions/1678936/jquery-autocomplete-modification-gmail-like-matching\">match通过名字或姓氏的开头喜欢它是在Gmail中。

Ultimately it would be even better to match by beginning of first or last name like it is in Gmail.

请注意：我试图想出一个办法做到这一点使用jQuery UI部件明确。既然我已经在我的项目使用jQuery UI，我打算坚持下来，尽量不增加额外的库到我的Web应用程序。

Note: I'm trying to figure out a way to do this using the jQuery UI widget specifically. Since I'm already using jQuery UI in my project, I'm planning to stick with it and try not adding additional libraries to my web application.

推荐答案

在jQuery UI的v1.8rc3，的自动完成构件接受其可以是一个字符串，数组或一个回调函数源的选项。如果它是一个字符串，自动完成确实在该URL的GET得到选项/建议。如果一个数组，自动完成做了搜索，正如你所指出，对于在阵列中的条款的任何位置键入的字符的presence。最后一个变种是你想要的 - 回调函数。

In jQuery UI v1.8rc3, the autocomplete widget accepts a source option which can be either a string, an array, or a callback function. If it's a string, autocomplete does a GET on that URL to get options/suggestions. If an array, autocomplete does a search, as you pointed out, for the presence of the typed chars in any position in the terms of the array. The final variant is what you want - the callback function.

从自动完成文档：

第三变型中，回调，提供最大的灵活性，并可以用于任何数据源连接到自动填充。回调得到两个参数：

The third variation, the callback, provides the most flexibility, and can be used to connect any data source to Autocomplete. The callback gets two arguments:

•A 要求对象，用所谓的术语的单一属性，它指的是当前的价值在文字输入。例如，当用户在设置为自动完成做一个城市字段中输入新球，在 request.term 将举办新球。结果
  •A 响应函数，它需要一个单一的参数包含数据表明用户的回调。此数据应基于所提供的术语进行过滤，且必须在允许简单的本地数据的格式的数组：字符串阵或对象的阵列与标签/值/两个属性。

• A request object, with a single property called "term", which refers to the value currently in the text input. For example, when the user entered "new yo" in a city field that is set to do autocomplete, the request.term will hold "new yo".
• A response function, a callback which expects a single argument to contain the data to suggest to the user. This data should be filtered based on the provided term, and must be an array in the format allowed for simple local data: String-Array or Object-Array with label/value/both properties.

举例code：

var wordlist= [ "about", "above", "across", "after", "against",
                "along", "among", "around", "at", "before", 
                "behind", "below", "beneath", "beside", "between", 
                "beyond", "but", "by", "despite", "down", "during", 
                "except", "for", "from", "in", "inside", "into", 
                "like", "near", "of", "off", "on", "onto", "out", 
                "outside", "over", "past", "since", "through", 
                "throughout", "till", "to", "toward", "under", 
                "underneath", "until", "up", "upon", "with", 
                "within", "without"] ; 

$("#input1").autocomplete({
    // The source option can be an array of terms.  In this case, if
    // the typed characters appear in any position in a term, then the
    // term is included in the autocomplete list.
    // The source option can also be a function that performs the search,
    // and calls a response function with the matched entries.
    source: function(req, responseFn) {
        var re = $.ui.autocomplete.escapeRegex(req.term);
        var matcher = new RegExp( "^" + re, "i" );
        var a = $.grep( wordlist, function(item,index){
            return matcher.test(item);
        });
        responseFn( a );
    }
});

几个关键点：

• 调用 $ ui.autocomplete.escapeRegex（req.term）; 表示的逃跑的搜索词
  这样在用户键入的文本正则表达式的任何有意义的术语被视为纯文本。例如，该点（。）是有意义的正则表达式。我通过阅读源代码自动完成code学到这个escapeRegex功能。


• 与行新的正则表达式（）。它指定用^（抑扬），这意味着开始的正则表达式，它会在你键入的字符出现在阵，这是你想要的东西在学期开始的时候只匹配。它还使用了我的选项，这意味着不区分大小写的匹配。


• 在 $。gr​​ep的（）工具只是调用所提供的阵列中的每个学期所提供的功能。在这种情况下，功能简单地使用正则表达式，以查看是否在数组中的项是一个匹配什么类型的。


• 最后，responseFn（）被调用与搜索的结果。

• the call to $.ui.autocomplete.escapeRegex(req.term); That escapes the search term so that any regex-meaningful terms in the text typed by the user are treated as plain text. For example, the dot (.) is meaningful to regex. I learned of this escapeRegex function by reading the autocomplete source code.
• the line with new Regexp(). It specifies a regexp beginning with ^ (Circumflex), which implies, it will match only when the typed characters appear at the beginning of the term in the array, which is what you wanted. It also uses the "i" option which implies a case-insensitive match.
• the $.grep() utility just calls the provided function on each term in the provided array. The function in this case simply uses the regexp to see if the term in the array is a match for what was typed.
• finally, the responseFn() is invoked with the result of the search.

工作演示： http://jsbin.com/ezifi

是什么样子：

刚一说明：我找到自动完成的文档，在这一点上pretty不成熟。我没有发现这样做的例子，我找不到哪个.css文件是必要的或的.css类将被用于工作文档。我了解到这一切都源自检查code。

Just a note: I find the documentation on autocomplete to be pretty immature at this point. I didn't find examples that did this, and I couldn't find working doc on which .css files were necessary or which .css classes would be used. I learned all this from inspecting the code.

又见，<一个href=\"http://stackoverflow.com/questions/2435964/jqueryui-how-can-i-custom-format-the-autocomplete-plug-in-results\">how我可以自定义格式的自动完成功能插件的结果吗？

这篇关于jQuery UI的自动完成构件搜索配置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！