检查用户输入是否与变量中的多个单词匹配,如果匹配,则显示图像

时间:2017-03-31 22:32:12

标签: javascript jquery arrays variables textinput

现在:做什么工作 我在一个主要具有语音界面的应用程序中有一个搜索页面,并且还有一个文本输入搜索选项(用于搜索图像)。我首先制定了语音命令并拥有所有图像并且工作正常,现在我正在添加文本配置。下面是现在有效的例子,我只使用一个单词作为变量进行了测试:

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();
      } 
      })

问题:添加一个字的几个变化并检查用户输入是否与任何内容相匹配现在我正在使用文本部分并且意识到与语音不同,它必须在匹配ONE字符串或字符串组合(根据API规范)文本可以为一个单词提供多个选项,因为人们有时会拼错单词。 我使用上面的代码完美地向我展示了一个特定的图像,但现在我想为同一个单词添加几个选项,以及可能的单词组合。

在这种情况下,这个词是&#34;六十年代&#34;。 我创建了

的单个变量
var sixties = "sixties";

哪个有效。但现在我想在下面添加以下两个选项:

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

这与我的其他代码不兼容。将这些单词添加到数组中的最佳方法是什么?(?)如果有匹配,在其中任何一个中显示图像?我知道我错过了&#34;检查这些词之间是否匹配&#34;选项,但我无法弄清楚如何改变我已经拥有的东西。

2 个答案:

答案 0 :(得分:1)

由于您使用的是jQuery,因此您可以使用$ .inArray进行检查 http://api.jquery.com/jQuery.inArray/

var sixties =["sixty", "sixtys", "sixties"];
if($.inArray(value, sixties) !== false) {
    $("#button1960s_002").show().delay(10000).fadeOut();
}

答案 1 :(得分:1)

如果值在60多个数组中,则返回true:

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