有多个关键字的自动完成

我不确定它是否可能，但我想让它使jquery-ui自动完成与多个关键字一起使用以获得相同的结果。有多个关键字的自动完成

这是一个example但它相当老，我似乎无法让它工作，即使使用较旧的jquery文件。我不熟悉jQuery和JavaScript，但我可以设法编辑现有的东西。

这是我现在有（不为多关键字调整）：

<script type="text/javascript"> 
    $(document).ready(function() { 
     NewAuto(); 
    }); 

    function NewAuto() { 
     var products = [ 
     <?php foreach($search__1 as $search) { 
     echo "{value: '". $search['product_name'] ."'}, ";}?> 
     ]; 
     $("#keyword").autocomplete({ 
      source: function(requestObj, responseFunc) { 
       var matchArry = products.slice(); // Copy the array 
       var srchTerms = $.trim(requestObj.term).split(/\s+/); 
       // For each search term, remove non-matches. 
       $.each(srchTerms, function(J, term) { 
        var regX = new RegExp(term, "i"); 
        matchArry = $.map(matchArry, function(item) { 
         return regX.test(item) ? item : null; 
        }); 
       }); 
       // Return the match results. 
       responseFunc(matchArry); 
      }, 
      open: function(event, ui) { 
       // This function provides no hooks to the results list, so we have to trust the selector, for now. 
       var resultsList = $("ul.ui-autocomplete > li.ui-menu-item > a"); 
       var srchTerm = $.trim($("#keyword").val()).split(/\s+/).join('|'); 
       // Loop through the results list and highlight the terms. 
       resultsList.each(function() { 
        var jThis = $(this); 
        var regX = new RegExp('(' + srchTerm + ')', "ig"); 
        var oldTxt = jThis.text(); 
        jThis.html(oldTxt.replace(regX, '<span class="srchHilite">$1</span>')); 
       }); 
      } 
     }); 
    } 

</script>

来源

2013-05-15 Akano

“多关键字”是什么意思？你能举一些例子吗？ – asifrc

你的链接示例工作正常，不是吗？ –

我发现在互联网上的例子，但不能让它在我的代码和多关键字工作，如果你看看例子，你可以看到，当你键入“赢”和“日”，你会得到“赢得一天“ – Akano

如果我理解正确乌尔问题，ü要显示符合同一个句子中多字，其名单。

点击here例如

<html> 
<head> 
    <title>Testing</title> 
    <link href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" /> 
    <style type="text/css"> 
     .srchHilite { background: yellow; } 
    </style> 
    <script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script> 
    <script src="scripts/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 

     $(document).ready(function() { 
      NewAuto(); 
     }); 

     function NewAuto() { 
      var availableTags = ["win the day", "win the heart of", "win the heart of someone"]; 
      alert(availableTags); // alert = win the day,win the heart of,win the heart of someone 
      $("#tags").autocomplete({ 
       source: function(requestObj, responseFunc) { 
        var matchArry = availableTags.slice(); // Copy the array 
        var srchTerms = $.trim(requestObj.term).split(/\s+/); 
        // For each search term, remove non-matches. 
        $.each(srchTerms, function(J, term) { 
         var regX = new RegExp(term, "i"); 
         matchArry = $.map(matchArry, function(item) { 
          return regX.test(item) ? item : null; 
         }); 
        }); 
        // Return the match results. 
        responseFunc(matchArry); 
       }, 
       open: function(event, ui) { 
        // This function provides no hooks to the results list, so we have to trust the selector, for now. 
        var resultsList = $("ul.ui-autocomplete > li.ui-menu-item > a"); 
        var srchTerm = $.trim($("#tags").val()).split(/\s+/).join('|'); 
        // Loop through the results list and highlight the terms. 
        resultsList.each(function() { 
         var jThis = $(this); 
         var regX = new RegExp('(' + srchTerm + ')', "ig"); 
         var oldTxt = jThis.text(); 
         jThis.html(oldTxt.replace(regX, '<span class="srchHilite">$1</span>')); 
        }); 
       } 
      }); 
     } 

    </script> 
</head> 
<body> 
    <div> 
     <label for="tags"> 
      Multi-word search: 
     </label> 
     <input type="text" id="tags" /> 
    </div> 
</body> 
</html>

来源

2013-05-15 11:54:52

看起来这样也会关闭你输入第二个单词的时刻，在我的代码和示例中试过它，但是不去= – Akano

你能解释一下你想要的吗？ –

如果你要输入“win”和“日“一起通常你不会得到结果，但我想仍然得到结果”赢得一天“ – Akano

即时得到市镇名表格数据库，并使用自动完成显示它。

function GetLocalityList() { 
     var LocalityArray = []; 
     $.post("MvcLayer/Index/GetLocalityList", 
     { 
      CityID: $('#sltCity').val() 
     }, 
     function(data) { 
      // My sql query will be like this select LocalityID, CityID, LocalityName from tablename where CityID = 20 
      // Here (data) is array format. Like this 
      // [{"LocalityID":9397,"CityID":55,"LocalityName":"Adugodi"},{"LocalityID":9398,"CityID":55,"LocalityName":"Aga Abbas Ali Road"},{"LocalityID":9399,"CityID":55,"LocalityName":"Agaram"},{"LocalityID":9400,"CityID":55,"LocalityName":"Agrahara Dasara Halli"},{"LocalityID":9401,"CityID":55,"LocalityName":"Agrahara Dasarahalli"},{"LocalityID":9402,"CityID":55,"LocalityName":"Airport Exit Road"},{"LocalityID":9403,"CityID":55,"LocalityName":"Horamavu"},{"LocalityID":9404,"CityID":55,"LocalityName":"Hosakere Halli"},{"LocalityID":9405,"CityID":55,"LocalityName":"Hennur"},{"LocalityID":9406,"CityID":55,"LocalityName":"Hesaraghatta"},{"LocalityID":9407,"CityID":55,"LocalityName":"HKP Road"},{"LocalityID":9408,"CityID":55,"LocalityName":"HMT Layout"},{"LocalityID":9409,"CityID":55,"LocalityName":"Hongasandra"},{"LocalityID":9410,"CityID":55,"LocalityName":"Hoody"},{"LocalityID":9411,"CityID":55,"LocalityName":"Hayes Road"} ] 

      $.each(data, function(key, value) { 
       LocalityArray[key] = value.LocalityName; 
      }); 
      $("#txtLocality" + SelectedTab).autocomplete({ 
       minLength: 1, 
       source: function(req, responseFn) { 
        // \\b show each match letter in each word of list 
        //^show each match letter in whole word of list 
        var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(req.term), "i"); 
        var a = $.grep(LocalityArray, function(item, index) { 
         return matcher.test(item); 
        }); 
        responseFn(a); 
       } 
      }); 
     }, 
     'json' 
     ); 
    }

来源

2013-05-18 09:25:33

有多个关键字的自动完成

回答

相关问题