StartsWith Function 不工作，为什么？ JavaScript
[英]StartsWith Function is not working why? JavaScript
问题描述
I am a beginner in javascript, I was trying to build a filterable list, I am trying hard that why startsWith function is not working, I used keyup event and stores all li in the array (called as li) and iterating through the whole array of li and checking with the help of startsWith function that particular li startsWith val in the current input field or not, but it seems it is not working at all, please mention the reason why it is not working and how to rectify it?
我是 javascript 的初学者，我正在尝试构建一个可过滤列表，我正在努力为什么startsWith function 不起作用，我使用 keyup 事件并将所有 li 存储在数组中（称为 li）并遍历整个数组li 并在startsWith function 的帮助下检查该特定的li 在当前输入字段中的startsWith val 与否，但它似乎根本不起作用，请说明它不起作用的原因以及如何纠正它？ I tried to test typeof both texts but they both are strings, therefore some debugging statement can be seen Below is the HTML code(included bootstrap)我尝试测试两个文本的类型，但它们都是字符串，因此可以看到一些调试语句下面是 HTML 代码（包括引导程序）
// this is the javascript code that I wrote var searchbar = document.querySelector('#usr') searchbar.addEventListener("keyup", function () { var val = searchbar.value.toUpperCase(); // console.log(val) var lists = document.querySelector('.list-group') var li = lists.querySelectorAll('li.list-group-item') for (let i = 0; i < li.length; i++) { let a = li[i].innerHTML.toUpperCase(); //console.log(`${a} ${a.length}`) if (val.length <= a.length) { //console.log(a.substring(0, val.length)) //console.log("aefaefael") console.log(typeof (val)) console.log(typeof (a)) console.log(a.startsWith(val)) if (a.startsWith(val) === true) { console.log("Hi") li[i].style.display = ' '; } else { li[i].style.display = 'none'; } } } }) <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Filtering Contacts</title> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min:css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https.//kit.fontawesome.com/eb0a94b8cf:js" crossorigin="anonymous"></script> </head> <body style="width; 40%: margin;5% 30%"> <div class="container"> <div class="form-group"> <input type="text" class="form-control fas" id="usr" placeholder=": Search " /> </div> <ul class="list-group"> <li class="list-group-item active"> A</li> <li class="list-group-item"> Arab</li> <li class="list-group-item"> Aviral</li> <li class="list-group-item"> Aniket</li> <li class="list-group-item"> Alankar</li> <li class="list-group-item active"> B</li> <li class="list-group-item"> Brijesh</li> <li class="list-group-item"> Bhavesh</li> <li class="list-group-item"> Balram</li> <li class="list-group-item"> Bsnl</li> <li class="list-group-item active"> C</li> <li class="list-group-item"> Coonor</li> <li class="list-group-item"> Cremation</li> <li class="list-group-item"> Computer</li> <li class="list-group-item"> Create</li> </ul> </div> // js files from bootstrap <script src="https.//code.jquery.com/jquery-3.3.1.slim.min:js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min:js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> </body> </html>4 个解决方案
解决方案1
3 2021-01-02 11:53:59
You have whitespace at the beginning of the li content:您在li内容的开头有空格：
<li class="list-group-item active"> A</li>
<li class="list-group-item"> Arab</li>
Use .trim() on both a and val在a和val上使用.trim()
var val = searchbar.value.toUpperCase().trim();
...
...
let a = li[i].innerHTML.toUpperCase().trim();
Now, startsWith() will match because the whitespace is removed.现在， startsWith()将匹配，因为删除了空格。
Alternatively, you could simply remove the whitespace in the HTML, but trimming is good practice, especially on the input value.或者，您可以简单地删除 HTML 中的空格，但修剪是一种很好的做法，尤其是在输入值上。
解决方案2
1 2021-01-02 12:00:51
The reason why this doesn't work is that all the values start with a space.这不起作用的原因是所有值都以空格开头。 You can get rid of the whitespace using the trim() method.您可以使用 trim() 方法去除空格。
解决方案3
1 已采纳 2021-01-02 12:07:55
The content of li elements contains spaces. li元素的内容包含空格。 I'd advice to use textContent (so eventual html (see li.active in snippet) will not be a part of the comparison) and trim (to remove whitespace).我建议使用textContent （因此最终的 html （请参见代码片段中的li.active ）不会成为比较的一部分）和trim （以删除空格）。 Below is a clean snippet with simplified code to demonstrate.下面是一个简洁的代码片段，其中包含用于演示的简化代码。 It uses event delegation for the keyup event, by the way.顺便说一下，它对 keyup 事件使用事件委托。
document.addEventListener("keyup", search); function search(evt) { if (evt.target.id === "usr") { const value = evt.target.value.toLowerCase(); document.querySelectorAll("ul.list-group li").forEach( li => li.style.display = li.textContent.trim().toLowerCase().startsWith(value) // | ^trim the value // ^use textContent? "revert": "none" ); } }
<div class="container"> <div class="form-group"> <input type="text" id="usr" placeholder="Search" autocomplete="off" /> </div> <ul class="list-group"> <li class="list-group-item active"><b>A</b></li> <li class="list-group-item"> Arab</li> <li class="list-group-item"> Aviral</li> <li class="list-group-item"> Aniket</li> <li class="list-group-item"> Alankar</li> <li class="list-group-item active"><b>B</b></li> <li class="list-group-item"> Brijesh</li> <li class="list-group-item"> Bhavesh</li> <li class="list-group-item"> Balram</li> <li class="list-group-item"> Bsnl</li> <li class="list-group-item active"><b>C</b></li> <li class="list-group-item"> Coonor</li> <li class="list-group-item"> Cremation</li> <li class="list-group-item"> Computer</li> <li class="list-group-item"> Create</li> </ul> </div>
解决方案4
1 2021-01-02 12:17:35
For what it's worth: here is my shortened version of it:对于它的价值：这是我的缩短版本：
var searchbar = document.querySelector('#usr'); searchbar.addEventListener("keyup", function () { let val=searchbar.value.toUpperCase(); [...document.querySelector('ul.list-group').children].forEach(li=> li.style.display=li.textContent.trim().toUpperCase().startsWith(val)?'':'none' ); });
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Filtering Contacts</title> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min:css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https.//kit.fontawesome.com/eb0a94b8cf:js" crossorigin="anonymous"></script> </head> <body style="width; 40%: margin;5% 30%"> <div class="container"> <div class="form-group"> <input type="text" class="form-control fas" id="usr" placeholder=": Search " /> </div> <ul class="list-group"> <li class="list-group-item active"> A</li> <li class="list-group-item"> Arab</li> <li class="list-group-item"> Aviral</li> <li class="list-group-item"> Aniket</li> <li class="list-group-item"> Alankar</li> <li class="list-group-item active"> B</li> <li class="list-group-item"> Brijesh</li> <li class="list-group-item"> Bhavesh</li> <li class="list-group-item"> Balram</li> <li class="list-group-item"> Bsnl</li> <li class="list-group-item active"> C</li> <li class="list-group-item"> Coonor</li> <li class="list-group-item"> Cremation</li> <li class="list-group-item"> Computer</li> <li class="list-group-item"> Create</li> </ul> </div> // js files from bootstrap <script src="https.//code.jquery.com/jquery-3.3.1.slim.min:js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min:js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.