VueJS（或 Vanilla JS）用于过滤结果的测试对象，包括二级搜索

Question

我一直在处理一个有趣的情况，我一直无法确定为什么它没有按预期工作。我这里的代码是最新的尝试，我相信它很接近，只是遗漏了一些东西。如果有人可以帮助我，那就太好了。（这是我为一家动物收养机构做的志愿者项目）

设置如下：

我有一个 firebase 数据库，大约有。 7,000 名采用者。它们被分解成一个对象，如下所示：

{
  ApplicantCellPhone: "ADOPTERS ACTUAL INFORMATION",
  ApplicantCity: "ADOPTERS ACTUAL INFORMATION",
  ApplicantDLNum: "ADOPTERS ACTUAL INFORMATION",
  ApplicantEmail: "ADOPTERS ACTUAL INFORMATION",
  ApplicantEmployerName: "ADOPTERS ACTUAL INFORMATION",
  ApplicantFirstName: "ADOPTERS ACTUAL INFORMATION",
  ApplicantHomePhone: "ADOPTERS ACTUAL INFORMATION",
  ApplicantLastName: "ADOPTERS ACTUAL INFORMATION",
  ApplicantStreet: "ADOPTERS ACTUAL INFORMATION",
  ApplicantZip: "ADOPTERS ACTUAL INFORMATION",
  CoapplicantCellPhone: "ADOPTERS ACTUAL INFORMATION",
  CoapplicantCity: "ADOPTERS ACTUAL INFORMATION",
  CoapplicantDLNum: "ADOPTERS ACTUAL INFORMATION",
  CoapplicantEmail: "ADOPTERS ACTUAL INFORMATION",
  CoapplicantEmployerName: "ADOPTERS ACTUAL INFORMATION",
  CoapplicantFirstName: "ADOPTERS ACTUAL INFORMATION",
  CoapplicantHomePhone: "ADOPTERS ACTUAL INFORMATION",
  CoapplicantLastName: "ADOPTERS ACTUAL INFORMATION",
  CoapplicantStreet: "ADOPTERS ACTUAL INFORMATION",
  CoapplicantZip: "ADOPTERS ACTUAL INFORMATION",
}

现在我有一个这样的搜索框：

<b-form-input id="searchInputString" v-model="searchInputString" name="searchInputString" type="text" placeholder="Search Adopters" class="form-control mb-3" autocomplete="off" @keyup.native="filterAdopters" />

使用@keyup 将执行此功能：

filterAdopters: function(event) {
  this.$nextTick(() => {
    this.adoptersFilteredDataCollection = {}
    this.spiltFilteredData = []

    if (!this.isNullOrEmpty(this.searchInputString)) {
      let searchArray = this.searchInputString.split(" ")
      console.log('Search Array =>', searchArray)

      for (let i = 0; i <= searchArray.length; i++) {
        this.spiltFilteredData.push(this.allAdoptersData.filter(s =>
          s.ApplicantCellPhone.toLowerCase().indexOf(this.searchInputString.toLowerCase()) > -1 ||
          s.ApplicantCity.toLowerCase().indexOf(this.searchInputString.toLowerCase()) > -1 ||
          s.ApplicantDLNum.toLowerCase().indexOf(this.searchInputString.toLowerCase()) > -1 ||
          s.ApplicantEmail.toLowerCase().indexOf(this.searchInputString.toLowerCase()) > -1 ||
          s.ApplicantEmployerName.toLowerCase().indexOf(this.searchInputString.toLowerCase()) > -1 ||
          s.ApplicantFirstName.toLowerCase().indexOf(this.searchInputString.toLowerCase()) > -1 ||
          s.ApplicantHomePhone.toLowerCase().indexOf(this.searchInputString.toLowerCase()) > -1 ||
          s.ApplicantLastName.toLowerCase().indexOf(this.searchInputString.toLowerCase()) > -1 ||
          s.ApplicantStreet.toLowerCase().indexOf(this.searchInputString.toLowerCase()) > -1 ||
          s.ApplicantZip.toLowerCase().indexOf(this.searchInputString.toLowerCase()) > -1 ||
          s.CoapplicantCellPhone.toLowerCase().indexOf(this.searchInputString.toLowerCase()) > -1 ||
          s.CoapplicantCity.toLowerCase().indexOf(this.searchInputString.toLowerCase()) > -1 ||
          s.CoapplicantDLNum.toLowerCase().indexOf(this.searchInputString.toLowerCase()) > -1 ||
          s.CoapplicantEmail.toLowerCase().indexOf(this.searchInputString.toLowerCase()) > -1 ||
          s.CoapplicantEmployerName.toLowerCase().indexOf(this.searchInputString.toLowerCase()) > -1 ||
          s.CoapplicantFirstName.toLowerCase().indexOf(this.searchInputString.toLowerCase()) > -1 ||
          s.CoapplicantHomePhone.toLowerCase().indexOf(this.searchInputString.toLowerCase()) > -1 ||
          s.CoapplicantLastName.toLowerCase().indexOf(this.searchInputString.toLowerCase()) > -1 ||
          s.CoapplicantStreet.toLowerCase().indexOf(this.searchInputString.toLowerCase()) > -1 ||
          s.CoapplicantZip.toLowerCase().indexOf(this.searchInputString.toLowerCase()) > -1
        ))
      }
    }
    else {
      this.searchInputString = ''
      this.spiltFilteredData = {}
    }

    console.log('spiltFilteredData', this.spiltFilteredData)
  })
},

我不想假设任何事情，所以我只想解释我在做什么...

通过删除 let searchArray = this.searchInputString.split(" ") 如果我输入 Kimberly 它将 return 345 个结果，现在我想通过 space 开始过滤搜索一遍，从 345 个结果中。因此，如果我输入 Kimberly Brown，它应该 return 13 个结果，现在再次按下，从 13 个结果中，我开始输入 Hillsboro（即城市），它将 return 2 个结果，然后我并输入 345 Center St 它将 return 1 结果与正确的 Kimberly。我虽然会把它们转换成一个数组然后使用 include，虽然这并不像我想的那么好...有什么建议吗？

Answer 1

您应该将所有行分配给变量 results，然后在 for 中继续使用

过滤结果

results = results.filter(s => {....

对于搜索输入中的每个词，它会不断缩小匹配行的范围。

我没有对此进行测试，但它应该可以工作

filterAdopters: function(event) {
  this.spiltFilteredData = []

  if (!this.isNullOrEmpty(this.searchInputString)) {
    let searchArray = this.searchInputString.split(" ")
    console.log('Search Array =>', searchArray)

    // get all rows
    let results = this.allAdoptersData.map(s => {
      // concatenate all props and lowercase them to avoid doing it multiple times in `for` loop
      // add new helper property `concatenatedProps` to all rows - we will remove it after
      s.concatenatedProps  = [
        s.ApplicantCellPhone,
        s.ApplicantCity,
        s.ApplicantDLNum,
        s.ApplicantEmail,
        s.ApplicantEmployerName,
        s.ApplicantFirstName,
        s.ApplicantHomePhone,
        s.ApplicantLastName,
        s.ApplicantStreet,
        s.ApplicantZip,
        s.CoapplicantCellPhone,
        s.CoapplicantCity,
        s.CoapplicantDLNum,
        s.CoapplicantEmail,
        s.CoapplicantEmployerName,
        s.CoapplicantFirstName,
        s.CoapplicantHomePhone,
        s.CoapplicantLastName,
        s.CoapplicantStreet,
        s.CoapplicantZip
      ].join(' ') // because we don't search ' ', we can use it to join text
       .toLowerCase()

      return s
    });

    for (let i = 0; i < searchArray.length; i++) {
      let searchText = searchArray[i].toLowerCase();

      results = results.filter( s => s.concatenatedProps.indexOf( searchText) !== -1 )
    }

    this.spiltFilteredData = results.map(s => {
      // remove helper property
      delete s.concatenatedProps

      return s
    })

  } else {
    this.searchInputString = ''
    this.spiltFilteredData = []
  }

  console.log('spiltFilteredData', this.spiltFilteredData)
},

VueJS（或 Vanilla JS）用于过滤结果的测试对象，包括二级搜索

VueJS (or Vanilla JS) Test object for filtered results that includes secondary search

javascript

filter

include

vue.js