捷自动完成的部件的搜索结构

StackOverflow https://stackoverflow.com/questions/2382497

题

我要找到使用 捷自动完成的 部件实现的用户查找的第一个或最后一个名称。它看起来像默认情况下自动完成看起来词的字符序列，无论其发生在一个字。所以如果你有数据，例如： javascript, asp, haskell 和你的类型 'as' 你会得到所有三个。我想它只比赛开始的这个词。因此，在上述例子中，你得到的只有 'asp'.有没有一种方法，配置自动完成的部件做到这一点？

最后，它甚至会更好 比赛开始的第一个或最后一名 喜欢这是我最喜爱的。

注：我试图找出一种方法来这样做使用的技小工具。因为我已经使用便捷在我的项目，我打算坚持它，并尽量不增加额外的图书馆给我的网应用程序。

有帮助吗？

解决方案

在技v1。8rc3, 自动完成的部件 接受一个 来源 选项，它可以是一串，一系列或回调功能。如果这是一个串，自动完成并得到关于该网址得到的选择/建议。如果一个数组，自动搜索，如你所指出的，对于存在的类型字符的任何位置方面阵列。最终变种是你想要什么-回调功能。

从自动完成的文件：

第三个变化，将回调，提供最大的灵活性，并可以用于连接的任何数据来源自动完成。回调取两个参数：

•一个 request 目的，与一个单一的财产称为"用语"，这指的价值目前的文本输入。例如，当用户进入"新的哟"在一个市场设置的做自动完成的， request.term 将举行"新哟".
•一个 response 功能，回其预期一个单一的参数包含的数据为建议用户使用。这个数据应该被过滤根据所提供的术语，而且必须一系列的格式允许使用简单的本地数据：串阵或目列与标签/数值/两性质。

例编码： 

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); 那 逃脱 搜索词 因此，任何regex-有意义的条款在文本输入的用户被视为纯文本。例如，点(.) 是有意义regex.我学会了这个escapeRegex功能通过阅读自动完成的源代码。
  • 线 new Regexp().它指定一个regexp开始与^(抑扬)，这意味着，它会比赛只有当类型的人物出现在起始语中的阵列，这是什么你想要的。它还使用的"我"的选择，这意味着情况不敏感的匹配。
  • 的 $.grep() 用只是呼吁提供功能上的每个术语在所提供阵列。功能，在这种情况下只使用regexp看如果该术语在该阵列是一个比赛是什么类型。
  • 最后，responseFn()被援引的结果搜索。

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

它看起来像什么:

alt text

只是一个注：我找到文件在自动完成相当不成熟的，在这一点上。我没有找到例子，做这个，我无法找到工作的文件在其中。css文件是必要的，或其中。css类将使用。我得知所有这种检查的代码。

也参见， 我怎么可以定制格式的自动完成的插件的结果？

其他提示

我使用自动完成从devbridge。 http://www.devbridge.com/projects/autocomplete/jquery/

它的开始字符只匹配。

“替代文字”

至于基于名字或姓氏匹配，你只需要与姓氏和名字提供一个查找列表。

用法示例：

  var wordlist = [
      'January', 'February', 'March', 'April', 'May', 'June',
      'July', 'August', 'September', 'October', 'November',
      'December' ]; 

      var acOptions = {
          minChars:2,
          delimiter: /(,|;)\s*/, // regex or character
          maxHeight:400,
          width:300,
          zIndex: 9999,
          deferRequestBy: 10, // miliseconds

          // callback function:
          onSelect: function(value, data){
              //$('#input1').autocomplete(acOptions);
              if (typeof data == "undefined") {
                  alert('You selected: ' + value );
              }else {
                  alert('You selected: ' + value + ', ' + data);
              }
          },

          // local autosuggest options:
          lookup: wordlist
      };

这传递给初始化自动完成控制的lookup选项可以是一个列表，或者一个对象。以上表明一个简单的列表。如果你想连接到得到返回的建议的一些数据，然后进行lookup选择的对象，像这样的：

var lookuplist = {
    suggestions:   [ "Jan", "Feb", "Mar", "Apr", "May" ],
    data :         [ 31, 28, 31, 30, 31, ]
};

THX cheeso为intrducing jsbin.com，

我您的扩展代码来支持第一代和姓氏比赛得。

  $("#input1").autocomplete({
      source: function(req, responseFn) {
          addMessage("search on: '" + req.term + "'<br/>");

          var matches = new Array();
          var needle = req.term.toLowerCase();

          var len = wordlist.length;
          for(i = 0; i < len; ++i)
          {
              var haystack = wordlist[i].toLowerCase();
              if(haystack.indexOf(needle) == 0 ||
                 haystack.indexOf(" " + needle) != -1)
              {
                  matches.push(wordlist[i]);
              }
          }

          addMessage("Result: " + matches.length + " items<br/>");
          responseFn( matches );
      }
  });

演示： http://jsbin.com/ufimu3/

型 '一个' 或 '重'

如果你要搜索的字符串中的每个单词的开头，一个更优雅的解决方案狗腿子的是采取cheeso的只是使用正则表达式单词边界特殊字符：

var matcher = new RegExp( "\\b" + re, "i" );

例： http://jsbin.com/utojoh/2 （尝试搜索 'BL' ）

有另一个jQuery的自动完成插件任选只是在每次开始搜索项目（该选项为 matchContains=false ，我认为这是默认的太）。

由于没有在jQuery UI的插件，这样的选择的，我猜你要么必须使用不同的插件，或者重写你现在正在使用的一个。

你在哪里得到的数据来填充自动完成？它是从数据库？如果是这样，你可以做你想做的事，您的查询，只返回匹配每个单词（/姓）的开头的结果。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top