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的自动完成与多个关键字，突出和部分匹配

回答

相关问题