时间戳

首页 > 解决方案 > 从下拉列表中选择“智能”

javascript - 从下拉列表中选择“智能”

问题描述

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

我创建了一个这样的数据列表：

<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，那么它也应该给出那些按顺序包含“印度”和“ahal”的地方。所以它应该显示像“India Agra Taj Mahal”、“India Jaipur Jal Mahal”和“India Mathura Sheesh Mahal”这样的输出

我相信：

  1. 下面链接中提出的解决方案似乎没有正确地做我想要的。我的问题不是关于“包含”，而不仅仅是包含。它是关于包含不同位置的片段。
  2. @yash Shukla 给出的解决方案与我想要的很接近。

标签： javascripthtmlcss

解决方案

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

<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 的文本。如果这不是您正在寻找的，您可以轻松调整逻辑。

推荐阅读