JavaScript：如何将用户输入与数组进行比较？

Question

我一直在试图做一个学校项目的一个非常简单的搜索引擎，但我不知道如何比较我收到的用户输入（从输入文本框中的字符串）到我在数组中的数据（带有一堆名称的NodeList对象）。我有一个HTML页面，其中包含一个输入表单和一堆电影标题（格式），我想比较用户在输入中输入的内容形式到页面上的电影标题。如果用户输入的电影名称与我想要的那部电影相匹配，并且输入的电影与任何电影都不匹配，那么我只需要一个警告框来弹出说明输入与任何电影都不匹配的情况。

我一直在试图做这样的：

var All_Titles = document.getElementsByTagName("h3"); 
var User_Input = document.forms["search_form"]; 

function InputValidation() { 
    var x = document.forms["search_form"]["input_box"].value; 

    if (x == "" || x == null) { 
     alert("You haven't entered anything"); 
    } else { 
     Search(); 
    } 
} 

function Search() { 
    if (User_Input == All_Titles) { 
     document.writeln("It worked!"); 
    } else { 
     alert("No matched movies"); 
    } 
} 

正如你所看到的，我第一次捕获一个名为“USER_INPUT”变种的用户输入，和我做的电影片名一样。

然后，我检查用户是否确实有任何文字进入搜索表单;如果他们没有，他们会收到一条错误消息，如果他们这样做，我运行下面定义的Search（）函数。

这里有棘手的部分：我真的不知道我怎么能比较用户输入和我有的！我已经用If语句对它进行了尝试，正如你所看到的那样，但这似乎不起作用。

任何人都可以帮助我解决这个问题吗？

Answer 1

我更喜欢使用jQuery女巫比较可以做同样的用更少的代码。

使用jQuery：

<script type="text/javascript"> 
function search() { 
    var flag = false; 
    movieName = $("#movieSearch").val(); 
    $(".moviesList").children("h3").each(function(index) { 
     if (movieName === $(this).html()) { 
      $(this).css("background-color", "yellow"); 
      flag = true; 
     } else { 
      $(this).css("background-color", "white"); 
     } 
    }); 
    if(flag == false) { 
     alert("no such movie was found"); 
    } 
} 
</script> 

相同的代码但仅JS（以下可读性和可维护性）：

<script type="text/javascript"> 
function search() { 
    var flag = false; 
    movieName = document.getElementById("movieSearch").value; 
    movies = document.getElementsByTagName("h3"); 
    for (var i = 0; i < movies.length; i++) { 
     if (movieName === movies[i].innerHTML) { 
      movies[i].style.backgroundColor = "yellow"; 
      flag = true; 
     } else { 
      movies[i].style.backgroundColor = "white"; 
     } 
    } 
    if(flag == false) { 
     alert("no such movie was found"); 
    } 
} 
</script> 

HTML：

<div class="moviesList"> 
    <h3>HHH</h3> 
    <h3>mmm</h3> 
    <h3>123</h3> 
</div>  
<input type="text" id="movieSearch" /> 
<button onclick="search()">Search By Name</button> 

jQuery是一个js很常见的库。通过简单地增加使用它： <script src="http://code.jquery.com/jquery-latest.min.js"></script>

Answer 2

使用循环遍历所有的标题进行迭代，每个用户输入

function Search() { 
    User_Input = User_Input.trim(); 
    var i, len, title; 
    len = All_Titles.length; 
    for(i = 0; i < len; i++){ 
     title = All_Titles[i].innerHTML.trim(); 
     if(User_Input === title){ 
      document.writeln("It worked!"); 
      return; 
     } 
    } 

    if(i === len){ 
     alert("No matched movies"); 
    } 
} 

Answer 3

这里是我的解决方案

function Search() 
{ 

    if (All_Titles.indexOf(User_Input)>-1) 
    { 
     alert("yes"); 
    } 
    else 
    { 
     alert("No matched movies"); 
    } 

} 

Answer 4

该解决方案可以为你工作..尝试它

var arr = []; 
    for (var i = 0, ref = arr.length = All_Titles.length; i < ref; i++) { 
    arr[i] = All_Titles[i]; 
    } 

    function Search() 
    { 

     if (arr.indexOf(User_Input)>-1) 
     { 
      alert("yes"); 
     } 
     else 
     { 
      alert("not"); 
     } 

    } 


    Array.prototype.indexOf = function(elt) 
    { 
     var len = this.length >>> 0; 

     var from = Number(arguments[1]) || 0; 
     from = (from < 0) 
       ? Math.ceil(from) 
       : Math.floor(from); 
     if (from < 0) 
      from += len; 

     for (; from < len; from++) 
     { 
      if (from in this && 
        this[from] === elt) 
       return from; 
     } 
     return -1; 
    }; 

Answer 5

你可以试试这个例子

var search = function() { 
 
    var movie = document.getElementById("movie").value; 
 
    if(!movie.replace(/\s+/g,'')) {//remove blank spaces 
 
    alert('Movie name required !'); 
 
    return; 
 
    } 
 
    movie = movie.toUpperCase(); 
 
    var list = document.getElementById('movieList'); 
 
    list = list.getElementsByTagName('li');//movie title list 
 
    var i = list.length, html, flag = false, matches = []; 
 
    while(i --) {//walk through the list 
 
    html = list[i].innerHTML.toUpperCase();//get the movie in the li 
 
    if(-1 !== html.indexOf(movie)){//-1, string not found 
 
     flag = true; 
 
     matches.push(html); 
 
    } 
 
    } 
 
    if(!flag) { 
 
    alert('No match found !'); 
 
    } else { 
 
    alert('Matched: ' + matches.join(', '));//show matching movies csv 
 
    } 
 
};

<ul id="movieList"> 
 
    <li>Star Wars</li> 
 
    <li>X-Men</li> 
 
    <li>MIB</li> 
 
</ul> 
 

 
<p> 
 
    Search <input type="text" id="movie"/><input type="button" onclick="search()" value="Search"/> 
 
</p>