有多個關鍵字的自動完成

我不確定它是否可能，但我想讓它使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

有多個關鍵字的自動完成

回答

相關問題