我正在尝试创建一个过滤 <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
非常感谢对我的代码的任何帮助或评论。
最佳答案
有几个问题:
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;
关于javascript - 纯Js中的搜索功能过滤li的,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39917192/