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 它将返回 345 个结果，现在我想从 345 个结果中按空格过滤以重新开始搜索。因此，如果我输入 Kimberly Brown 它应该返回 13 个结果，现在再次按下，从 13 个结果中，我开始输入 Hillsboro（即城市），它​​将返回 2 个结果，然后我输入 345 Center St 它然后将使用正确的 Kimberly 返回 1 个结果。虽然我会将它们转换为数组然后使用包含，尽管这并不像我想象的那么好......有什么建议吗？

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