Question

尝试对数据列表进行高级搜索

我创建了一个像这样的数据主义者：

<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.它们按顺序包含所有两个单词（印度和玛哈尔）

是否有某种方法可以根据具体条款更多地启用此类搜索。

还有什么可以想到的

如果我搜索Indiaahal那么它也应该给那些拥有＆＃34; India＆＃34;和＃34; ahal＆＃34;按顺序包含。所以它应该显示像'印度阿格拉泰姬陵＆＃34;，＆＃34;印度斋浦尔Jal Mahal＆＃34;和＃34;印度马图拉Sheesh Mahal＆＃34;

我相信：

以下链接中提出的解决方案似乎无法正确执行我想要的操作。我的问题不是关于＆＃34;包含＆＃34;但不仅仅是包含。它包含不同位置的碎片。
@yash Shukla给出的解决方案接近我想要的。

Answer 1

假设你有一个如下所示的数据列表：

<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);
}

现在让我们假设您的搜索字词是印度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的文本。如果这不是您正在寻找的，您可以轻松调整逻辑。

选择＆＃34;智能地＆＃34;从下拉列表中

1 个答案: