Question

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

这是我的功能：

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>

其中一个人的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打印...

以下是codepen：http://codepen.io/Delano83/pen/qaxxjA?editors=1010

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

Answer 1

有几个问题：

stringValue.onkeyup - stringValue是值。你无法解决它。
var eachStudent = 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;

搜索功能过滤纯粹的Js

1 个答案: