jquery ui autocomplete:如何将“whitespace”分隔查询与准确的“逗号”分隔记录相匹配

时间:2012-04-06 00:16:33

标签: javascript jquery regex jquery-ui-autocomplete

我在客户端有预加载 xml记录,应用了 jquery ui autocomplete
说有这样的记录:“汽车,自行车,飞机”

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

如何将“car bike”与给定的“逗号”分隔记录相匹配?

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

对于那些可能处理相同情况的人来说,这是我提出的解决方案,首先简要解释一下:

  • 首先,我分割白色空间上的搜索词(查询)
  • 然后我通过将拆分词与更多正则表达式属性连接来动态构建正则表达式定义。 例如:说用户搜索“Car Bike” - &gt;分裂后我动态构建以下字符串:
    [ str = “Car” +(任何字符)+ “Bike” +(任何字符)],然后被送到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);
                 }
               }
         }