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

问题描述

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

I am using Vue.js to filter items from a JSON array, using an input field. The array consists of mobile phones.

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

Looking at the Samsung array, I have Samsung Galaxy S5, Samsung Galaxy S6 etc.

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

Now when I type: Samsung, I get a list of all the samsungs. When I type Galaxy S5, I get the Samsung Galaxy S5. But when I type Samsung S5 I get nothing, because in between 'Samsung' and 'S5' there is 'Galaxy'.

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

I hope someone can help me out on this one.

我的代码：

<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>

推荐答案

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

you can split your search keyword and check, if each word exists in title with every, which will return true, if each word will exist in title

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

这篇关于数组中的Vue.js搜索关键字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！