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

Question

我正在使用 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>

Answer 1

你可以拆分你的搜索关键字并检查，如果每个单词都存在于标题中，如果每个单词都存在于标题中，这将返回 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));
      });
    }
  }
});