Javascript Can'；t过滤器搜索

我一直试图让我的搜索过滤器工作，但无法让它工作。我是一个初学者，但我尽我最大的努力使它工作。任何能帮上忙的人：）

            <div class="notes_search">
                <input type="search" id="search_input" onkeyup="searchFilter()" placeholder="Search...">
            </div>

            <ul class="notes_list">
            </ul>

            <p class="notes_empty-msg">Nothing to show.</p>

        </section>

    </div>

html

            <div class="notes_search">
                <input type="search" id="search_input" onkeyup="searchFilter()" placeholder="Search...">
            </div>

            <ul class="notes_list">
            </ul>

            <p class="notes_empty-msg">Nothing to show.</p>

        </section>

    </div>

无需显示
            <div class="notes_search">
                <input type="search" id="search_input" onkeyup="searchFilter()" placeholder="Search...">
            </div>

            <ul class="notes_list">
            </ul>

            <p class="notes_empty-msg">Nothing to show.</p>

        </section>

    </div>

下面是剧本

            <div class="notes_search">
                <input type="search" id="search_input" onkeyup="searchFilter()" placeholder="Search...">
            </div>

            <ul class="notes_list">
            </ul>

            <p class="notes_empty-msg">Nothing to show.</p>

        </section>

    </div>

function searchFilter() {
    // Declare variables
    var input, filter, ul, li, a, i;
    input = document.getElementsById('search');
    filter = input.value.toUpperCase();
    ul = document.getElementsById('search')[0];
    li = ul.getElementsByTagName("li");


    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter)===0) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}

函数searchFilter（）{
//声明变量
var输入、滤波器、ul、li、a、i；
输入=document.getElementsById（'search'）；
filter=input.value.toUpperCase（）；
ul=document.getElementsById（'search'）[0]；
li=ul.getElementsByTagName（“li”）；
对于（i=0；i

您可以通过Jquery进行搜索

            <div class="notes_search">
                <input type="search" id="search_input" onkeyup="searchFilter()" placeholder="Search...">
            </div>

            <ul class="notes_list">
            </ul>

            <p class="notes_empty-msg">Nothing to show.</p>

        </section>

    </div>

---

这里有几点是不正确的：

            <div class="notes_search">
                <input type="search" id="search_input" onkeyup="searchFilter()" placeholder="Search...">
            </div>

            <ul class="notes_list">
            </ul>

            <p class="notes_empty-msg">Nothing to show.</p>

        </section>

    </div>

• 它应该是

  getElementById

  而不是getElementsById（不是复数）
• 您的输入元素id为“search\u input”，但您正在尝试查找名为“search”的元素。查找元素时，它应该是id的确切名称，而不是包含它的部分单词。所以试试

  input=document.getElementById（'search_input'）

• 尝试使用innerText而不是innerHtml：innerHtml以html格式返回，而不是我记得的纯文本

index.html

            <div class="notes_search">
                <input type="search" id="search_input" onkeyup="searchFilter()" placeholder="Search...">
            </div>

            <ul class="notes_list">
            </ul>

            <p class="notes_empty-msg">Nothing to show.</p>

        </section>

    </div>

<div class="notes_search">
                <input type="search" id="search_input" onkeyup="searchFilter()" placeholder="Search...">
            </div>

            <ul class="notes_list">
              <li><a href = "/">hi</a></li>
              <li><a href = "/">hi</a></li>
              <li><a href = "/">bye</a></li>
            </ul>

            <p class="notes_empty-msg">Nothing to show.</p>

        </section>

    </div>

无需显示
            <div class="notes_search">
                <input type="search" id="search_input" onkeyup="searchFilter()" placeholder="Search...">
            </div>

            <ul class="notes_list">
            </ul>

            <p class="notes_empty-msg">Nothing to show.</p>

        </section>

    </div>

index.js

            <div class="notes_search">
                <input type="search" id="search_input" onkeyup="searchFilter()" placeholder="Search...">
            </div>

            <ul class="notes_list">
            </ul>

            <p class="notes_empty-msg">Nothing to show.</p>

        </section>

    </div>

function searchFilter() {
    // Declare variables
    var input, filter, ul, li, a, i, text;
    input = document.getElementById('search_input');
    filter = input.value.toUpperCase();
    ul = document.getElementsByClassName('notes_list')[0];
    li = ul.getElementsByTagName("li");


    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        text = a.textContent || a.innerText;
        if (a.innerHTML.toUpperCase().indexOf(filter)===0) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}

函数searchFilter（）{
//声明变量
var输入、过滤器、ul、li、a、i、文本；
输入=document.getElementById（'search_input'）；
filter=input.value.toUpperCase（）；
ul=document.getElementsByClassName（'notes_list'）[0]；
li=ul.getElementsByTagName（“li”）；
对于（i=0；i

---

我还向您的html添加了一些li和a标记项，因为您没有这些标记项，而且它找不到html上没有的标记。

我不完全确定您试图实现什么，但简单的html数据列表能否解决您的问题：

            <div class="notes_search">
                <input type="search" id="search_input" onkeyup="searchFilter()" placeholder="Search...">
            </div>

            <ul class="notes_list">
            </ul>

            <p class="notes_empty-msg">Nothing to show.</p>

        </section>

    </div>

---

您的代码存在许多问题

            <div class="notes_search">
                <input type="search" id="search_input" onkeyup="searchFilter()" placeholder="Search...">
            </div>

            <ul class="notes_list">
            </ul>

            <p class="notes_empty-msg">Nothing to show.</p>

        </section>

    </div>

首先，它不是

getElementsById

，而是

getElementsById

，但是您可能会发现使用它更容易，因为它们与CSS选择器相匹配（类似于jQuery）

            <div class="notes_search">
                <input type="search" id="search_input" onkeyup="searchFilter()" placeholder="Search...">
            </div>

            <ul class="notes_list">
            </ul>

            <p class="notes_empty-msg">Nothing to show.</p>

        </section>

    </div>

其次，您没有具有

search

id的元素

            <div class="notes_search">
                <input type="search" id="search_input" onkeyup="searchFilter()" placeholder="Search...">
            </div>

            <ul class="notes_list">
            </ul>

            <p class="notes_empty-msg">Nothing to show.</p>

        </section>

    </div>

第三，HTML不包含列表项，因此无法搜索任何内容

            <div class="notes_search">
                <input type="search" id="search_input" onkeyup="searchFilter()" placeholder="Search...">
            </div>

            <ul class="notes_list">
            </ul>

            <p class="notes_empty-msg">Nothing to show.</p>

        </section>

    </div>

这是一个带有注释的工作版本（使用一些您可能不熟悉但可以使代码更简洁的更现代的JS方法）。注意：它使用一个类使项目可见或不可见，并在文本内容中搜索，而不仅仅是检查它是否位于内容的开头，这使它更灵活一些

            <div class="notes_search">
                <input type="search" id="search_input" onkeyup="searchFilter()" placeholder="Search...">
            </div>

            <ul class="notes_list">
            </ul>

            <p class="notes_empty-msg">Nothing to show.</p>

        </section>

    </div>

函数searchFilter（）{
//您可能会发现“querySelector”更容易使用，因为它
//允许您使用CSS选择器对应元素
const input=document.querySelector（“#search”）；
const filter=input.value.toUpperCase（）；
const ul=document.querySelector（'ul'）；
const lis=ul.getElementsByTagName（“li”）；
对于（i=0；i

li{显示：无；}
.visible{display:block}

鲍勃
起诉
丽塔
丽塔和鲍勃
约翰

无需显示
            <div class="notes_search">
                <input type="search" id="search_input" onkeyup="searchFilter()" placeholder="Search...">
            </div>

            <ul class="notes_list">
            </ul>

            <p class="notes_empty-msg">Nothing to show.</p>

        </section>

    </div>

document.getElementsById

应该是

document.getElementById

（单数）。相关：您可能打算使用

querySelectorAll

。您的文本框id是

search\u input

，您正在查找

search

。学习使用调试器。控制台会清楚地指出您在使用

getElementsById

时的错误，您也没有任何列表项，因此我不知道这将如何工作。答案与OPs问题无关。在代码中没有jQuery的情况下建议jQuery也不是一个好主意。我正在开发一个记笔记的应用程序。我知道我还有很长的路要走。但是谢谢你的帮助和洞察力：）谢谢你的回复和帮助。我现在看问题更清楚了。我将尝试并实施它，看看它是如何运行的：）谢谢尝试并看看它是如何运行的：）太好了：）别忘了勾选一个你认为最有用的答案