Compare input to array

Question

I have a list that I want to compare to a input value and when the input value doesn't match anything in my list I want to make an alert(Album don't exist).

Here my search bar:-

<input id="search" type="text" name="text" placeholder="Album name">
     <button onclick="sendToPage()">Search</button>`

And here my list:-

var validSearch = ["The Stage", "Hail to the King", "Nightmare", "Avenged Sevenfold", "City of Evil", "Waking the Fallen", "Sounding the Seventh Trumpet"];

I have read a suggestion but can´t get my head around it.. :)

Possible duplicate of Javascript/jQuery compare input value to array — TrampolineTales
– TrampolineTales, Commented Nov 23, 2016 at 14:34

Tschallacka · Accepted Answer · 2020-03-17 20:05:52Z

1

You can use indexOf on arrays. It returns the index of the element matched. Only thing I'd suggest is you turn the search array lower or upper case first, so matching doesn't rely on the person typing it EXACTLY as you have defined it with every capital letter exactly as you wrote it.

function match(elem) {
    const validSearch = [
                    "The Stage", 
                    "Hail to the King", 
                    "Nightmare", 
                    "Avenged Sevenfold", 
                    "City of Evil", 
                    "Waking the Fallen", 
                    "Sounding the Seventh Trumpet"];
      
    /** make search case insentive **/
    let searchKeys = validSearch.map( e => e.toLowerCase() );
    /** search the input **/
    let index = searchKeys.indexOf(elem.value.toLowerCase());
        
    /** if not matched **/
    if(index == -1) {
       window.alert("Album does not exist. Please try again");
    }
    else {
        let album = validSearch[index];
        window.alert("FOUND IT! " + album);
    }
}
+function() {
    let search = document.getElementById('search');
    document.getElementById('searchbutton').addEventListener('click', (e) => {match(search)});
}();

<input id="search" type="text" name="text" placeholder="Album name">
<button id="searchbutton">Search</button>

edited Mar 17, 2020 at 20:05

answered Nov 23, 2016 at 14:46

Tschallacka

28.9k15 gold badges99 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Adam Over a year ago

Thanks for your help, I really appreciate it!

Adam Over a year ago

Can you explain these code blocks a little more? Do not understand why you created an empty list and then was the letter c comes from. And why you have a parameter named elem? /** make search case insentive / var searchKeys = []; for(c=0;c<validSearch.length;c++) { searchKeys[c] = validSearch[c].toLowerCase(); } / search the input **/ var index = searchKeys.indexOf(elem.value.toLowerCase());

Tschallacka Over a year ago

For the loop: w3schools.com/js/js_loop_for.asp Also, the empty list is so it can store the "case insensitive variant" of the entries. We need it initialise it first before we can fill it. Otherwise javascript doesn't know it's an array.

vp_arth Over a year ago

Just a warn: Array.prototype.indexOf is not a part of legacy IE js.

Tschallacka Over a year ago

@KrzysztofDelestowicz add an id to the button, the document.getElementById('your_button_id_here').on('click', (e) => { match(document.getElementById('search'));}); and I would change the for loop into a map.var searchKeys = validSearch.map( e => e.toLowerCase() );

|

JstnPwll · Accepted Answer · 2016-11-23 14:42:25Z

1

//Your array of valid searches to compare against
var validSearch = ["The Stage", "Hail to the King", "Nightmare", "Avenged Sevenfold", "City of Evil", "Waking the Fallen", "Sounding the Seventh Trumpet"];

//The click handler function
var sendToPage = function(e){
  //Get the input value by finding the element by its ID
  var album = document.getElementById('search').value;
  
  //Check if the value is in the array
  if(validSearch.indexOf(album) < 0){
    alert("Album don't exist");
  }else{
    alert("Album exists");
  }
}

<input id="search" type="text" name="text" placeholder="Album name">
<button onclick="sendToPage()">Search</button>`

answered Nov 23, 2016 at 14:42

JstnPwll

8,7252 gold badges36 silver badges57 bronze badges

Comments

RizkiDPrast · Accepted Answer · 2016-11-23 15:32:51Z

You can try using regex instead: can search for case insensitive keywords and can find the closest item with limited keywords (in case user dont know how to spell correctly );

var validSearch = ["The Stage", "Hail to the King", "Nightmare", "Avenged Sevenfold", "City of Evil", "Waking the Fallen", "Sounding the Seventh Trumpet"];

function sendToPage() {
  //get value and trim for unnecesary spaces, and set variable
  var q = document.getElementById("search").value.trim(),
    re, result;

  //return if textbox is empty
  if (!q.length > 0) {
    return;
  }

  //set RegExp (indexOf is faster but Case Sensitive)
  re = new RegExp(".*" + q.replace(/\s/g, "\\s") + ".*", "ig");

  //start searching
  validSearch.some(function(v) {
    result = re.exec(v);
    if (result) {
      return true;
    }
  })

  //if match 
  if (result !== null) {
    alert("Found it!! - " + result[0]);
  } else {
    alert("Book not Found!! - " + q);
  }

  //refresh input box
  document.getElementById("search").value = "";

}

<input id="search" type="text" name="text" placeholder="Album name">
<button onclick="sendToPage()">Search</button>

Collectives™ on Stack Overflow

Compare input to array

3 Answers 3

10 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related