如何在 VueJS 中创建自定义搜索功能？

Question

我想在 VueJS 中创建自定义搜索功能。

例如，我有 2 个产品 PlayStation Plus 90 Days IE 和 PlayStation Plus 90 Days NO。现在，要找到我必须输入全名的东西，但我只想输入 PlayStation 90 并在我的搜索字段中找到这两种产品。我该怎么做？

我正在尝试做类似的事情，但它不起作用：

computed: {
customSearch() {
  return this.result.filter(product => {
    return product.text
      .toLowerCase()
      .includes(this.searchInput.toLowerCase())
  })
}

},

另外，我想 split 那样刺痛 ["PlayStation", "Plus", "90", "Days", "IE"] 并通过关键字查找，但我不知道该怎么做 :\

感谢解答！

Answer 1

使用Array#every:

const 
  data = [{ text:"PlayStation Plus 90 Days IE" }, { text:"PlayStation Plus 90 Days NO" }],
  searchInput = "PlayStation 90";

const searchWords = searchInput
  .toLowerCase() // convert to lower-case
  .split(/\s+/); // split to words
const result = data.filter(({ text }) => 
  searchWords.every(str => // every word should be in the text of the current product
    text.toLowerCase().includes(str)
  )
);
  
console.log(result);

如何在 VueJS 中创建自定义搜索功能？

How to create custom search function in VueJS?

javascript

vue.js

vue-component

vuejs2