javascript - 纯Js中的搜索功能过滤li的

Question

我正在尝试创建一个过滤 <ul> 的输入基于纯 JavaScript 中的值。它应该通过获取 li 并将其内部元素名称与过滤器文本进行比较，使用 onkeyup 进行动态过滤。

这是我的功能:

var searchFunction = function searchFeature (searchString) {
console.log("Is my search feature working?");
//Get the value entered in the search box
var inputString = document.getElementById('inputSearch');
var stringValue = inputString.value;
//Onkeyup we want to filter the content by the string entered in the search box
stringValue.onkeyup = function () {
    //toUpperCase to make it case insensitive
    var filter = stringValue.toUpperCase();
        //loop through all the lis 
        for (var i = 0; i < eachStudent.length; i++) {
        //Do this for all the elements (h3, email, joined-details, date)
        var name = eachStudent[i].getElementsByClassName('student-details')[1].innerHTML;
        //display all the results where indexOf() returns 0
        if (name.toUpperCase().indexOf(filter) == 0) 
            eachStudent[i].style.display = 'list-item';
        else
            eachStudent[i].style.display = 'none';
        }
    }}

我的搜索栏 HTML:

<div class="student-search">
 <input id="inputSearch" placeholder="Type name here.." type="text">    <button>Search</button></div>

我的其中一个 li 的 HTML:

 <ul class="student-list">
    <li class="student-item cf">
        <div class="student-details">
            <img class="avatar" src="#">
            <h3>John Doe</h3>
            <span class="email">John.Doe@example.com</span>
        </div>
        <div class="joined-details">
               <span class="date">Joined 01/01/14</span>
       </div>
    </li>

我想根据输入的值过滤所有元素(姓名、电子邮件、加入日期)。不幸的是，我没有收到任何错误，而且它根本不起作用。该函数被正确调用，因为 console.log 打印...

这是代码笔:http://codepen.io/Delano83/pen/qaxxjA?editors=1010

非常感谢对我的代码的任何帮助或评论。

Answer 1

有几个问题:

• stringValue.onkeyup - stringValue 是值。你无法启动它。
• var everyStudent = document.querySelector(".student-item"); 将使用 student-item 类获取第一个内容。您需要使用 querySelectorAll 或仅使用 jquery 的 $('.find-item')。
• if (name.toUpperCase().indexOf(filter) == 0) 如果在名称开头找到过滤器，indexOf 返回 0。如果在索引 0 处找到，则将 0 视为匹配。您需要检查 -1，这意味着根本没有找到它。

否则它或多或少有效，干得好。

我还添加了 Jquery 以更快地修复它。如果您坚持使用纯 JavaScript，我相信您将能够编辑它。

在这里查看:http://codepen.io/anon/pen/WGrrXW?editors=1010 。这是生成的代码:

var page = document.querySelector(".page");
var pageHeader = document.querySelector(".page-header");
var studentList = document.querySelector(".student-list");
var eachStudent = document.querySelectorAll(".student-item");
var studentDetails = document.querySelector(".student-details");


//Recreate Search Element in Js
var searchBar = function createBar(searchString) {

    var studentSearch = document.createElement("div");
    var input = document.createElement("input");
    var searchButton = document.createElement("button");

    input.type = "text";

    var txtNode = document.createTextNode("Search");
    if (typeof txtNode == "object") {
        searchButton.appendChild(txtNode);
    }

    studentSearch.setAttribute("class", "student-search");
    input.setAttribute("id", "inputSearch");

    //append these elements to the page
    studentSearch.appendChild(input);
    studentSearch.appendChild(searchButton);

    input.placeholder = "Type name here..";

    return studentSearch;
}

var searchFunction = function searchFeature(searchString) {
    console.log("Is my search feature working?");
    //Get the value entered in the search box
    var inputString = document.getElementById('inputSearch');
    var stringValue = inputString.value;
    //Onkeyup we want to filter the content by the string entered in the search box

    inputString.onkeyup = function() {
            //toUpperCase to make it case insensitive
        var filter = $(this).val().toUpperCase()
        //loop through all the lis 
        for (var i = 0; i < eachStudent.length; i++) {
            //Do this for all the elements (h3, email, joined-details, date)
            var name = $(eachStudent[i]).find('h3').text()
      console.log(name, filter, name.toUpperCase().indexOf(filter))
            //display all the results where indexOf() does not return -1
            if (name.toUpperCase().indexOf(filter) != -1)
                eachStudent[i].style.display = 'list-item';
            else
                eachStudent[i].style.display = 'none';
        }
    }
}

function addElements() {
    console.log('Add search bar, trying to anyway...')
    pageHeader.appendChild(searchBar());
    // page.appendChild(paginationFilter());
    onLoad();
}

window.onload = addElements;
window.onLoad = searchFunction;