Question

我正在尝试创建一个简单的搜索引擎，将用户输入与html文档中的一堆元素进行比较，其中的元素是电影标题。

当用户完全或部分输入电影标题时，脚本应找到最近的匹配标题并使用style.Backgroundcolor突出显示它。我一直试图这样做：

HTML

<input type="text" title="Zoekbalk" id="userinput" placeholder="Typ hier om te zoeken" class="input_box" onkeydown="if (event.keyCode == 13) document.getElementById('search_button').click()"/>

<input class="search_button" onsubmit="return false;" type="button" value="Zoek" id="search_button" onclick="Search()"/>

JS

function Search() {
    userinput = document.getElementById("userinput").value;
    if (!userinput.replace(/\s+/g, '')) {
        alert('U heeft geen zoekterm ingevuld!');
        return;
    }

    // userinput = userinput.toLowerCase(); 
    var list = document.getElementsByTagName("h3");
    var i = list.length, html, flag = false, matches = []; 

    while (i--)
    {
        var html = list[i].innerHTML.toLowerCase;
        if (-1 < html.indexOf(userinput))
        {
            flag = true;
            matches.push(html);
        }
    }

    if (!flag)
    {
        alert('No match found !');
    }
    else 
    {
        alert('Matched: ' + matches.join(', '));
        matches.style.backgroundColor = "#ff6d6d";
        matches.scrollIntoView();
    }
};

问题是这样的：第一个If（）检查用户是否实际填写了任何东西，完全正常。但如果我填写任何东西，没有任何反应！我看了一下Chrome Debug控制台，它说它在我的JS第22行发现了一个未被捕获的类型错误（这是在While（）循环之后的第一个if语句。）

有谁知道如何解决这个问题？

Answer 1

您的代码中存在几个问题。最明显的是toLowerCase是一种方法，所以你必须调用它。

另一个错误是matches.style.backgroundColor = "#ff6d6d";毫无意义，因为matches是字符串数组。以下是固定代码：

function Search() {

    var userinput = document.getElementById("userinput").value.toLowerCase();
    if (!userinput.replace(/\s+/g, '')) {
        alert('U heeft geen zoekterm ingevuld!');
        return;
    }

    clear();

    // userinput = userinput.toLowerCase(); //we converteren de user userinput naar LowerCase
    var list = document.getElementsByTagName("h3"); //dit wordt de lijst met titels
    var i = list.length,
        html, flag = false,
        matches = []; //hier maken we vars/arrays voor het loopen en returnen van output aan

    while (i--) //we loopen door de list net zolang als die lang is (i = lengte v.d. lijst)
    {
        var html = list[i].innerHTML.toLowerCase();
        if (-1 < html.indexOf(userinput)) //als er een match is word 'flag' true
        {
            flag = true;
            matches.push(list[i]); //de desbetreffende titel wordt in de lege array matches[] gezet
            list[i].className = "matched";
        }
    }

    if (!flag) {
        alert('No match found !');
    } 
    else {
        alert('Matched');
        //matches.scrollIntoView();
    }
}

function clear() {
    var list = document.getElementsByTagName("h3");
    for (var i = 0; i < list.length; i++) {
         list[i].className = '';
    }
}

我还添加了clear函数来删除之前搜索中的突出显示，并使用CSS类而不是style.backgroundColor来获得最佳实践。

演示：http://jsfiddle.net/gm7uofj6/

Answer 2

您的代码中存在多个错误。你的一些错误是：

没有括号的toLowerCase方法
matches数组存储DOM元素，但您尝试从那里获取字符串
尝试将style应用于数组！
还尝试在阵列上使用scrollIntoView！

此代码有效：

var list = document.getElementsByTagName("h3");

function Search() {
    var userinput = document.getElementById("userinput").value;

    if (!userinput.replace(/\s+/g, '')) {
      alert('U heeft geen zoekterm ingevuld!');
      return;
    }

    userinput = userinput.toLowerCase();

    var count = list.length, html, flag = false, matches = [], stringMatches = [];

    while (count--)
    {
      html = list[count].innerHTML.toLowerCase();

      if (-1 < html.indexOf(userinput))
      {
        flag = true;
        matches.push(list[count]);
        stringMatches.push(list[count].innerHTML.toLowerCase());
      }
    }

    if (!flag) {
      alert('No match found !');
    }
    else {
      alert('Matched: ' + stringMatches.join(', '));
      for (var i = 0; i < matches.length; i++) {
        matches[i].style.backgroundColor = "#ff6d6d";
        if (i === 0)
          matches[i].scrollIntoView();
      }
    }
  }

http://jsbin.com/tohecakojaji/1/edit

性能提示：将list变量放在Search函数之外，以避免每次点击都遍历DOM。

JavaScript：创建一个搜索<h3>元素的简单搜索引擎</h3>

2 个答案:

演示：http://jsfiddle.net/gm7uofj6/