使用计算属性 vuejs 进行高级搜索

Question

大家好，我有一个名为 searchQuery 的数据属性以及一个计算的属性，它在 templateArray 和 returns 模板中搜索我的项目名称和 keywordArray .它很好用。然而，我试图让它更健壮一点。这是我计算的属性

  searchResults: function(){
      return this.filteredTemplateArray.filter((template)=>{
        return template.itemName.toLowerCase().includes(this.searchQuery.toLowerCase())
          || template.keywordArray.toString().toLowerCase().includes(this.searchQuery.toLowerCase());
      })
  }

每个模板都作为一个对象返回，其中包含一个名为 keywordArray 的数组。对象看起来像这样

0:Object
categoryArray:Array[0]
dateAdded:"2016-05-27 10:16:56"
id:"15"
itemId:"73076"
itemName:"Colorful Trans"
keywordArray:Array[2]
0:"Water"
1:"Sparkles"
projectPath:"M:/Projects/Generics/CreativeEngine/2016/ColorfulImageTrans-Scott/ColorfulImageTrans.aep"
renderTime:"30"
stillImageLocation:"12.90"
tested:"1"
thumbName:"COLORFULIMAGETRANS"

基本上我想做的是，如果它 returns 没有 template.keywordArray.toString().toLowerCase().includes(this.searchQuery.toLowerCase()) 的结果我想搜索由 space 分隔的每个单词，就好像它是它自己的 searchQuery 一样。例如，现在如果我输入 sparkles，我会得到一个结果。如果我输入 water，我会得到一个结果，但如果我输入 water sparkles，则不会返回任何结果。如果 searchQuery 有 space 搜索 keywordArray 以查找水和火花。

Answer 1

someArray.toString returns 由逗号分隔的数组项 , 因此尝试用 space </code> 替换该逗号，如下所示： </p> <pre><code>template.keywordArray.toString().replace(","," ").toLowerCase().includes(this.searchQuery.toLowerCase());

如果搜索到的词顺序不对可以使用以下方法：

this.searchQuery.toLowerCase().split(' ').every(val => {
  return template.keywordArray.toString().toLowerCase().split(',').filter(item => {
    return item.includes(val)
  }).length !== 0;
})
/***OR directly search in keywordArray***/
this.searchQuery.toLowerCase().split(' ').every(val => {
  return template.keywordArray.filter(item => {
    return item.includes(val)
  }).length !== 0;
})

示例代码：

var items = ["aaa", "bbb", "ccc", "ddd"]
var s = "aaa bb"
var f = s.split(" ").every(st => {
  return items.filter(item => {
    return item.includes(st)
  }).length !== 0;
})
console.log(f)

使用计算属性 vuejs 进行高级搜索

advanced search with computed property vuejs

advanced-search

vue.js

computed-properties

使用计算 属性 vuejs 进行高级搜索

advanced search with computed property vuejs

advanced-search

vue.js

computed-properties

使用计算属性 vuejs 进行高级搜索