Vue.js 在数组中搜索关键字

Posted 2023-02-23

【中文标题】Vue.js 在数组中搜索关键字

【英文标题】：Vue.js search keyword in array

【发布时间】：2019-04-16 00:33:07

【问题描述】：

我正在使用 Vue.js 使用输入字段从 JSON 数组中过滤项目。该阵列由手机组成。

看三星阵列，我有三星 Galaxy S5、三星 Galaxy S6 等。

现在当我输入：Samsung 时，我会得到所有三星的列表。当我输入 Galaxy S5 时，我得到的是三星 Galaxy S5。但是当我输入 Samsung S5 时，我什么也得不到，因为在“Samsung”和“S5”之间有“Galaxy”。

我希望有人可以帮助我解决这个问题。

我的代码：

<input type="text" v-model="keyword" class="form-control" id="telefoon" placeholder="Search...">


<script>
var app = new Vue(
  el: '#app',
  data: 
    keyword: '',
    samsungList: []
  ,
  computed: 
    samsungFilteredList() 
      return this.samsungList.filter((samsung) => 
        return samsung.title.toLowerCase().includes(this.keyword.toLowerCase());
      );
    
  
);
</script>

【参考方案1】：

您可以拆分您的搜索关键字并检查每个单词是否存在于标题中，every，如果每个单词都存在于标题中，则返回 true

var app = new Vue(
  el: '#app',
  data: 
    keyword: '',
    samsungList: []
  ,
  computed: 
    samsungFilteredList() 
      return this.samsungList.filter((samsung) => 
        return this.keyword.toLowerCase().split(' ').every(v => samsung.title.toLowerCase().includes(v));
      );
    
  
);

【参考方案2】：

您的要求是部分搜索，因为 includes 不是正确的方法，因为它会寻找完全匹配。你可以使用indexOf

 let filteredResult = array.filter((i) => i.indexOf(this.keyword.toLowerCase()) > -1); // this will serve your purpose.

【讨论】：

感谢您的回复。我使用了 Artyom 的解决方案，但仍会研究您的解决方案。

【参考方案3】：

您可以在“samsungFilteredList”中使用“getMatchingResults()”方法，如下所示

var samsungList = ["Samsung Galaxy S5", "Samsung Galaxy S6"]

function getMatchingResults(input) 
 return samsungList.filter(d => input.split(' ').every(v => d.toLowerCase().includes(v.toLowerCase())))


console.log(getMatchingResults('samsung'))

console.log(getMatchingResults('samsung s5'))

console.log(getMatchingResults('galaxy'))