JS/ How to search with input by firstname and lastname but also work if i type space after firstname

Question

let input = document.getElementById('searchInput')
let searchField = document.getElementById('searchField')

input.addEventListener('keyup', (e) => {
    const string = e.target.value
const filteredUsers = users.filter((user) => {
if (string != '') {
if (user.name.first.toLowerCase().includes(string) || user.name.last.toLowerCase().includes(string)) {
 return user
 } else {
            searchField.innerHTML = ''
        }
    } else {
        searchField.innerHTML = ''
    }
})
filteredUsers.map(user => {
    personImg = user.picture.thumbnail
    person = user.name.first + ' ' + user.name.last
    searchField.innerHTML += `<li class="list-group-item"><img src='${personImg}'>${person}</li>`

})})

I have managed to write a searching function which returns a fetched user picture, first name and last name. Searching is by first and last name. However after entering first name and if i have multiple options displayed, if i press space to enter a last name of my choice it breaks. How do i implement it to work?

Answer 1

Replace this:

const string = e.target.value
if (user.name.first.toLowerCase().includes(string) || user.name.last.toLowerCase().includes(string)) {

With this:

const q1 = e.target.value.split(' ')[0]
const q2 = e.target.value.split(' ')[1]
if (user.name.first.toLowerCase().includes(q1) && (!q2 || user.name.last.toLowerCase().includes(q2))) {}

This way, it split John Doe to John and Doe and search John in the first names and Doe in the last names. ( !q2 || is for when the search query just contains the first name.)

Here is more completed answer:

// mock user data
let user = {name: {first: 'John', last: 'Doe'}}
// mock event
let e = {target: {value: 'John D'}}
// searched queries
const q1 = e.target.value.toLowerCase().split(' ')[0]
const q2 = e.target.value.toLowerCase().split(' ')[1]
let matched = false;
const first = user.name.first.toLowerCase();
const last = user.name.last.toLowerCase();
if(!q2){
  // when we entered just `John`,
  // then we should match all first names or last names containing `John`
  if(first.includes(q1) || last.includes(q1)) matched = true;
}else{
  // when we entered just `John D`, first name should match `John` and last name should match `D`.
  if(first.includes(q1) && last.includes(q2)) matched = true;
}
if (matched) {}

Also If the names may have more chunks (like: John Doe Smith ), you can split the search string into chunks, and search them inside of names, and sort the results. something like:

let foundUser = undefined;
e.target.value.split(' ').forEach(q => {
  if (user.name.first.toLowerCase().includes(q) || 
      user.name.last.toLowerCase().includes(q)) {
        foundUser = user;
  }
})
if(foundUser){...}else{...}