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>