自动完成多个关键字 [英] Autocomplete with multiple keywords
问题描述
我不确定是否可行，但我想做到这一点，以便jquery-ui自动完成功能可与多个关键字一起使用，以达到相同的结果.
I'm not sure if its possible but I would like to make it so that jquery-ui autocomplete works with multiple keywords for the same result.
这是一个示例，但是它相当旧，我似乎无法使其正常工作，即使使用较旧的jquery文件也是如此.我对jquery和javascript不太熟悉，但是我可以设法编辑现有内容.
Here is an example but its rather old and I couldn't seem to get it to work, even with the older jquery files. I'm not that familiar with jquery and javascript but I can manage to edit existing things.
这是我目前拥有的(对于多关键字没有任何调整):
This is what I currently have (without any adjustments for the multi-keyword):
<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>
推荐答案
如果我正确理解了您的问题，您想显示与同一句子的多个单词匹配的列表.
If i understand ur question correctly, u want to show list which match multiple word of same sentence.
例如，点击此处
Click here for example
<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>
这篇关于自动完成多个关键字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
