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-Statement，但是这似乎不起作用。

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

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

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

5 个答案: