我找到了一些展示如何突出显示多个匹配项的示例,例如:如果我输入“艺术设计”,我希望它突出显示为“艺术和设计程度”
以下示例(尽管使用静态数组)是我所追求的: http://jsfiddle.net/Q4jy9/1/
但是,我不知道如何使这个工作的远程PHP数据源。 下面是我正在使用的当前代码。每个按键都会将该术语发送到我的php并从数据库中选择匹配项。
有没有办法可以更改下面的脚本以允许突出显示多个单词/匹配,或者更改上面链接中的脚本以使用外部数据源?
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;
}
});
答案 0 :(得分:1)
尝试这样的事情(匹配的功能是从你的jsfiddle复制和粘贴):
$("#f input").autocomplete({
source: function(request, response) {
$.getJSON("livesearch.php", request, function(data, status, xhr ) {
var matchArry = availableTags.slice ();
var srchTerms = $.trim (requestObj.term).split (/\s+/);
$.each (srchTerms, function (J, term) {
var regX = new RegExp (term, "i");
matchArry = $.map (matchArry, function (item) {
return regX.test (item) ? item : null;
});
});
response(matchArray);
});
},
...
});
这是基于jquery UI示例:http://jqueryui.com/demos/autocomplete/#remote-with-cache
答案 1 :(得分:0)
在tborychowski的帮助下,我认为我们有一个可行的解决方案:)
<!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>