<分区>
标签 javascript html css
<分区>
尝试在数据列表上进行高级搜索
我创建了一个像这样的数据列表:
<datalist id=attractions>
<option value="India Agra Taj Mahal">
<option value="India Delhi Red Fort">
<option value="India Agra Red Fort">
<option value="India Jaipur Jal Mahal">
<option value="India Mathura Sheesh Mahal ">
</datalist>
<input id =places type=text list=attractions>
因此，当我在文本框中键入 India Agra 时，选项值将以 India Agra 开头，即只有两个(第一个和第三个)
但如果我键入 India Mahal，它将无法搜索任何内容。我希望得到答案:1、4 和 5。它们按顺序包含所有两个词(India 和 Mahal)
是否有某种方法可以根据上下文而不是通过确切的术语来启用此类搜索。
还能想到什么
如果我搜索 Indiaahal，那么它也应该按顺序给出包含“India”和“ahal”的那些地方。所以它应该显示像“India Agra Taj Mahal”、“India Jaipur Jal Mahal”和“India Mathura Sheesh Mahal”这样的输出
我相信:
最佳答案
假设你有一个像下面这样的数据列表:
<datalist id="locations">
<option value="India taj mahal">
<option value="India Qutub Minar">
<option value="China gate">
</datalist>
现在您可以选择所有选项值并将它们放入如下数组中:
var options = document.getElementById('locations').options;
var values = [];
for(var i=0; i<options.length; i++)
{
values.push(options[i].value);
}
现在假设您的搜索词是 India Minar，因此您可以构建如下所示的搜索逻辑:
var searchTerm = "India Minar";
var searchSplit = searchTerm.split(" ");
var availableSearches = [];
for(var i=0; i<values.length; i++) {
for(var j=0; j<searchSplit.length; j++) {
if(values[i].indexOf(searchSplit[j]) >= 0 &&
availableSearches.indexOf(values[i]) < 0){
availableSearches.push(values[i]);
}
}
}
console.log(availableSearches);
//["India taj mahal", "India Qutub Minar"]
此逻辑将在集合中搜索包含 India 和 Minar 的文本。如果这不是您要查找的内容，您可以轻松调整逻辑。
关于javascript - 从下拉列表中选择 "intelligently"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50791587/