I have been working on an interesting situation that I have been unable to determine why it isn't working as expected. The code that I have here is the latest attempt, and I believe it is close, just missing something. If anyone could help me out that would be great. (This is a volunteer project I am doing for an animal adoption agency)
Here is the setup:
I have a firebase database that has approx. 7,000 adopters. They are broken into a Object like so:
{
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",
}
Now I have a search box like this:
<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" />
With the @keyup is going to this function:
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)
})
},
I don't want to assume anything, so I just want to explain what I am doing...
By removing the let searchArray = this.searchInputString.split(" ") If I type in Kimberly it will return 345 results, now I want to filter down by the space to start the search over again, from the 345 results. So if I type in Kimberly Brown it should return 13 results, now by pressing again, from the 13 results, I start typing in Hillsboro (That is the city), it will return 2 results, then I and type in 345 Center St it will then return 1 result with the correct Kimberly. I though I would convert them to an array then use includes, although this isn't boding as well as I thought... Any suggestions?
You should assign all rows into variable results, and then in for keep filtering results with
results = results.filter(s => {....
For each word in your search input, it will keep narrowing down matching rows.
I didn't test this out, but it should work
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)
},