jQuery的自動完成與多個關鍵字，突出和部分匹配

我在尋找一個jQuery自動完成即會：徘徊無論它們出現 jQuery的自動完成與多個關鍵字，突出和部分匹配

允許多個字

搜索部分匹配
突出顯示所有出現
允許遠程數據源（即基於查詢字符串的PHP過濾器數據庫結果，每個按鍵動態更新）

因此，例如

搜索：「我家娃」

返回：「秀我的WA y以去家」

我有一個可怕的一次試圖找到可以提供此功能的內容，儘管它普遍期待Google式的自動完成功能。

jquery ui autocomplete（jQueryUI: how can I custom-format the Autocomplete plug-in results?）的monkeypatch接近，但似乎沒有提供動態遠程數據源。

我也接近與下面的腳本：

var termTemplate = "<span class='ui-autocomplete-term'>%s</span>"; 
$("#f input").autocomplete({ 
    source: "livesearch.php", 
    open: function(e, ui) { 
     var origKeyword = $("#f input").val(); 
     var acData = $(this).data('autocomplete'); 
     acData.menu.element.find('a').each(function() { 
     var me = $(this); 
     var regex = new RegExp(acData.term, "gi"); 
     me.html(me.text().replace(regex, function(matched) { 
      return termTemplate.replace('%s', matched); 
     })); 
     }); 

    }, 
    select: function(event, ui) { 
     var keyword = $("#f input").val(); 
     $("#f input").val(''); 
     window.location.href = 'MYURLHERE?VARIABLE=' + ui.item.value; 
     return false; 
    }, 
    focus: function(event, ui) { 
     return false; 
    } 
});

但是，它不處理突出用空格分隔的多個單詞。

如果有人有任何建議，我會非常感激。

來源

2012-09-05 iltdev

使用功能的源選項手動查詢服務器。看看這裏的第4步：http://net.tutsplus.com/tutorials/javascript-ajax/how-to-use-the-jquery-ui-autocomplete-widget/請注意，在第5步中，自動完成將搜索項傳遞給' $ _GET ['term']' – Nal

是的，一個動態的遠程資源絕對有可能。使用jQueryUI自動完成功能突出顯示個別單詞更難，但並非不可能 –

Thanks Nal。我已經加入了你提到的代碼中支持多重高亮的功能。但是我無法得到它的工作。你可能會看看我的代碼在答案1？ – iltdev

這是我去的解決方案：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.2.js'></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.js"></script> 

<style type='text/css'> 
    .srchHilite {background-color: yellow;} 
</style> 

<script type='text/javascript'> 
$(document).ready(function(){ 

var termTemplate = "<span class='ui-autocomplete-term'>%s</span>"; 
$("#tags").autocomplete({ 
source: function(request, response) { 
     $.getJSON("livesearch.php", request, function(data, status, xhr) { 

      var newmatchArry = new Array(); 
      var matchArry = data.slice(); 
      var srchTerms = $.trim (request.term).split (/\s+/); 

       //--- For each search term, remove non-matches. 
       $.each (srchTerms, function (J, term) { 
        var regX = new RegExp (term.value, "i"); 
        matchArry = $.map (matchArry, function (item) { 
         return regX.test (item) ? item : null; 
        }); 
       }); 

      response(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> 
<input id="tags"> 

</div> 
</body> 

</html>

來源

2012-09-11 13:29:31 iltdev

@ user287212，我做了一些有關多個關鍵字的JQuery自動完成的研究。我在這個address中找到了一個例子。這是一個複雜的例子，但有一個帶有多個關鍵字的JQuery AutoComplete示例。如果您在符號輸入中寫入了一個符號，程序會爲您帶來文件中的條款。在此link的示例說明。你可以看看這個鏈接。

來源

2012-09-06 17:15:06 RuudVanNistelrooy

謝謝阿齊茲。這當然似乎做我想要的......但技術上，我想我的聯盟。但我一定會看看它。我只是希望能夠修改上面的例子，因爲它接近工作。 – iltdev

jQuery的自動完成與多個關鍵字，突出和部分匹配

回答

相關問題