My search function is only matching exact strings

34 views Asked by At

My search method isn't working. You have to type the exact name the search is looking for in order for it to work, or else it returns nothing:

function find(){
    let inputField = document.getElementById("search");
    let value = inputField.value; 
    let getDeriva = value.search("Deriva")
    if(getDeriva == 0){    
        
    }else{
        let getRagno = value.search(" Ragno ")
        if(getRagno == 0){
            document.getElementById("matches").innerHTML = "4 Matches found";
            document.getElementById("demoTwo").innerHTML = "1. Ragno seat skeleton 20¢ No.1";
            document.getElementById("demoThree").innerHTML = "2. Ragno seat trim pcs 50¢ No.3";
            document.getElementById("demoFour").innerHTML = "3. Ragno headrest top skeleton and connection bar 5¢ No.58";
            document.getElementById("demoFive").innerHTML = "4. Ragno luxury sport trim whole seat and Spyder headrest 80¢ No.101";
        }else{
            let getAkalotos = value.search("Akalotos")
            if(getAkalotos == 0){
              
            }else{
                let getVentoor = value.search("Ventoor")
                if(getVentoor==0){
                  
                }else{
                    let getBentaar = value.search("Bentaar")
                    if(getBentaar == 0){
                      
                    }else{
                        document.getElementById("matches").innerHTML = "Nothing Found";
                    }
                }
            }
        }
    }
}

I was expecting that I could type in Fillis Ragno and JavaScript would search Ragno for me. But it did not work, and showed No Matches found.

I want to let people find what they're looking for, so I used the search method; however when I made it go in it didn't count as my search and all it did was false it up. So somehow instead of 0 (when the value is found) it still returned -1 (when the value isn't found).

1

There are 1 answers

0
makkusu On

Maybe should think about it the other way around. Instead of checking the search value and printing static results, you could have the results in an array and filter this array by the entered search term.

const data = [
  "Ragno seat skeleton 20¢ No.1",
  "Ragno seat trim pcs 50¢ No.3",
  "Ragno headrest top skeleton and connection bar 5¢ No.58",
  "Ragno luxury sport trim whole seat and Spyder headrest 80¢ No.101"
];
const searchtermInput = document.querySelector('.searchterm');

searchData = (e) => {
  let searchterm = searchtermInput.value;
  
  let foundData = data;
  if (searchterm != '') {
    foundData = data.filter(entry => entry.toLowerCase().includes(searchterm.trim().toLowerCase()));
  }
  
  console.log(foundData);
}

searchtermInput.addEventListener('input', searchData);
<input type="text" class="searchterm" placeholder="Enter search term">

You could improve the data.filter even more to handle space seperated words for example but that's up to you. Example: Split the search termin by spaces and filter for each segmet.