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 CenterSt。然后将使用正确的Kimberly返回1个结果。我虽然可以将它们转换为数组，然后使用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）测试对象，用于包含二次搜索的过滤结果

1 个答案: