Search code examples
javascriptjqueryarraysvariablestextinput

Check if user input matches any of several words in a variable, and if there is a match, show image


PRESENT: WHAT WORKS I have a search page in an application that has a predominantly voice interface and also has a text input search option (to search for images). I first worked out the voice commands and have all the images and that works fine, and now I am adding text configurations. Below is the example of what works now, I tested it using only one word as the variable:

HTML

<div id="searchBoxPage"class="videoContainer">
  <form>
    <input type="text" name="search" placeholder="Search">
  </form>
  <img id="button1960s_002" class="hiddenElement" src="animsAll/Anims_002_Button_1960s.gif">

  <video    autoplay loop muted>
<source src="videos/music_saint_etienne_only_love_cropped_370x660.mp4" type="video/mp4">
Your browser does not support the video tag.
</video></div>

JQUERY

$( "input" )
      .keyup(function() {
        var value = $( this ).val();
        var sixties = "sixties";
      if (value === sixties) {
        $("#button1960s_002").show().delay(10000).fadeOut();
      } 
      })

THE ISSUE: ADDING SEVERAL VARIATIONS OF ONE WORD AND CHECKING IF USER INPUT MATCHES ANY OF THEM Now I am working with the text part and just realized that unlike voice, where it has to match the ONE string or string combination (as per API specs), text can have several options for one word as people sometimes misspell words. I used the code above which worked perfectly to show me that one particular image, but now I want to add several options for the same word, as well as a possible combination of words.

in this case the word is "sixties". and I created the single variable of

var sixties = "sixties";

which worked. But now I want to add these two additional options below:

var sixties =["sixty", "sixtys", "sixties"];

and that did not work with the other code I had. What is the best way to also add these words into an array (?) and if there is a match, among any of them, show the image? I know I am missing the "check if there is a match among these words" option but I can't figure out how to change what I already have.


Solution

  • This will return true if value is in sixties array:

    if (value.indexOf(sixties) > -1)) {
        $("#button1960s_002").show().delay(10000).fadeOut();
    }