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”的 var 中捕获用户输入，然后对电影标题执行相同操作。

然后，我检查用户是否在搜索表单中有任何文本；如果没有，他们会收到一条错误消息，如果有，我会运行 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

你可以试试这个例子

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>

Answer 3

使用循环遍历所有标题，将每个标题与用户输入进行比较

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 4

这是我的解决方案

function Search()
{

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

}

Answer 5

此解决方案可能对您有用.. 尝试一下

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