Javascript 搜索函数过滤器li'；纯Js中的s_Javascript_Html_Dom

Javascript 搜索函数过滤器li'；纯Js中的s

javascript html dom

Javascript 搜索函数过滤器li'；纯Js中的s,javascript,html,dom,Javascript,Html,Dom,我正试图创建一个输入，根据纯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 =

我正试图创建一个输入，根据纯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';
        }
    }}

var searchFunction=函数searchFeature（searchString）{
log（“我的搜索功能正常吗？”）；
//获取在搜索框中输入的值
var inputString=document.getElementById（'inputSearch'）；
var stringValue=inputString.value；
//Onkeyup我们希望通过在搜索框中输入的字符串过滤内容
stringValue.onkeyup=函数（）{
//toUpperCase使其不区分大小写
var filter=stringValue.toUpperCase（）；
//遍历所有的lis
对于（变量i=0；i


搜索栏的“我的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>



无名氏
厕所。Doe@example.com
2014年1月1日加入


我想根据输入值筛选所有元素（姓名、电子邮件、加入日期）。
不幸的是，我没有收到任何错误，它根本不工作。
该函数被正确调用，因为console.log打印
代码笔在这里：
非常感谢对我的代码的任何帮助或评论。
有几个问题：

stringValue.onkeyup
-stringValue是值。你不能把它加起来
var eachStudent=document.querySelector（“.student项”）
将使用学生物品
类获取第一件东西。您需要使用querySelectorAll
或只使用jquery的$（'.find item'）
if（name.toUpperCase（）.indexOf（filter）==0）
indexOf如果在名称开头找到筛选器，则返回0。如果在索引0处找到0，则将其视为匹配项。您需要对照-1进行检查，这意味着根本找不到它

否则它或多或少会起作用，干得好
我还为自己添加了Jquery以更快地修复它。如果您坚持使用纯javascript，我相信您将能够编辑它
在这里查看：。以下是生成的代码：
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;

var page=document.querySelector（“.page”）；
var pageHeader=document.querySelector（“.page header”）；
var studentList=document.querySelector（“.student list”）；
var eachStudent=document.querySelectorAll（“.student项”）；
var studentDetails=document.querySelector（“.student details”）；
//在Js中重新创建搜索元素
var searchBar=函数createBar（searchString）{
var studentSearch=document.createElement（“div”）；
var输入=document.createElement（“输入”）；
var searchButton=document.createElement（“按钮”）；
input.type=“text”；
var txtNode=document.createTextNode（“搜索”）；
if（txtNode的类型==“对象”）{
searchButton.appendChild（txtNode）；
}
setAttribute（“类”、“学生搜索”）；
setAttribute（“id”、“inputSearch”）；
//将这些元素附加到页面
studentSearch.appendChild（输入）；
studentSearch.appendChild（搜索按钮）；
input.placeholder=“在此处键入名称..”；
返回学生搜索；
}
var searchFunction=函数searchFeature（searchString）{
log（“我的搜索功能正常吗？”）；
//获取在搜索框中输入的值
var inputString=document.getElementById（'inputSearch'）；
var stringValue=inputString.value；
//Onkeyup我们希望通过在搜索框中输入的字符串过滤内容
inputString.onkeyup=函数（）{
//toUpperCase使其不区分大小写
var filter=$（this.val（）.toUpperCase（））
//遍历所有的lis
对于（变量i=0；i
有几个问题：

stringValue.onkeyup
-stringValue是值。你不能把它加起来
var eachStudent=document.querySelector（“.student项”）
将使用学生物品
类获取第一件东西。您需要使用querySelectorAll
或只使用jquery的$（'.find item'）
if（name.toUpperCase（）.indexOf（filter）==0）
indexOf如果在名称开头找到筛选器，则返回0。如果在索引0处找到0，则将其视为匹配项。您需要对照-1进行检查，这意味着根本找不到它

否则它或多或少会起作用，干得好
我还为自己添加了Jquery以更快地修复它。如果您坚持使用纯javascript，我相信您将能够编辑它
在这里查看：。以下是生成的代码：
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;

var page=document.querySelector（“.page”）；
var pageHeader=document.querySe