javascript - jquery ui自动完成：如何将“空格”分隔的查询与准确的“逗号”分隔记录匹配

Question

我已经在客户端预加载了 xml 记录，在该记录上应用了jquery ui 自动完成功能。
假设有这样的记录："car,bike,plane"。

当前（在使用jquery ui 自动完成时）如果用户键入：“car,bike” -> 它将找到上面提到的记录。
但是，如果用户键入：“car bike”（这意味着不是逗号，而是空格）--> 将不会显示任何结果。

如何将“car bike”与给定的“comma”分隔记录匹配？

Answer 1

我认为您可以拆分两个数组并循环其中一个数组，以搜索另一个数组中循环项的索引。

<script type="text/javascript">

    var str="car,bike,plane";
    var strToSearch= "car bike";


    var splitted = str.split(",");
    var strToSearchSplitted = strToSearch.split(' ');
    var found = false;

    for (var i in splitted){
      if (strToSearchSplitted.indexOf(splitted[i]) != -1){
        found = true;
        break;
      }
    }
<script>

Answer 2

对于可能正在处理相同情况的窥视者，这是我提出的解决方案，首先简要说明：

• 首先，我在空白处拆分搜索词（查询）
• 然后，我通过将拆分的单词与更多的正则表达式属性连接起来，动态地构建一个正则表达式定义。例如：假设用户搜索“Car Bike” -->拆分后我动态构建以下字符串：
  [ str = “Car” +（任何字符）+ “自行车” +（任何字符） ] ，然后将其馈送到 javascript RegExp。

为了更清楚，这是我的代码：（希望它可以帮助你）

$( "#field" ).autocomplete({
         source:function(request, response) {
         var query_array = request.term.toUpperCase().split(/\s+/g);//split on white space
         if(query_array.length >1)// if two ore more words, separated by whitespace
         {
           if(!/^\s*$/.test(query_array[query_array.length-1]))//if last word is not only whitespace
             {
                var new_query = '';
                for (var i=0; i<query_array.length; ++i )
                {
                   new_query+='(\\b' +query_array[i]+'\\b)';//word boundaries
                   if(i<query_array.length-1)
                   {
                     new_query+="([\\s\\S\\.]*)";// match ALL characters including newline , * is for many
                   }
                }

                 var matcher = new RegExp('^'+new_query, "g");//must Start with query term, apply regex global
                 var a = $.grep( autocomplete_data_array, function(item,index){
                               return matcher.test(item.value);
                     });

                 if(a.length>0)
                 {
                   response(a);
                 }
               }
         }