基于首字母的过滤搜索
问题是我想以首字母在前的格式过滤列表中的单词。
正如您现在所看到的，我在搜索字段中输入字母“ a ”，结果是所有与“ a ”相关的单词。但我只想要“ a ”的第一个字母单词。
然后我输入“ an ”，结果应该是“ an ”起始词。
function myFunction() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>My Phonebook</h2>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<ul id="myUL">
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>
<li><a href="#">Agitha</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>
<li><a href="#">Calvin</a></li>
<li><a href="#">Christina</a></li>
<li><a href="#">Cindy</a></li>
</ul>
</body>
</html>
https://i.stack.imgur.com/yAXJP.png
皈依舞浏览 211回答 6
6回答
-
子衿沉夜
这if (txtValue.toUpperCase().indexOf(filter) > -1)应该改为if (txtValue.toUpperCase().indexOf(filter) === 0)function myFunction() { var input, filter, ul, li, a, i, txtValue; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); ul = document.getElementById("myUL"); li = ul.getElementsByTagName("li"); for (i = 0; i < li.length; i++) { a = li[i].getElementsByTagName("a")[0]; txtValue = a.textContent || a.innerText; if (txtValue.toUpperCase().indexOf(filter) === 0) { li[i].style.display = ""; } else { li[i].style.display = "none"; } }}<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1"></head><body><h2>My Phonebook</h2><input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"><ul id="myUL"> <li><a href="#">Adele</a></li> <li><a href="#">Agnes</a></li> <li><a href="#">Agitha</a></li> <li><a href="#">Billy</a></li> <li><a href="#">Bob</a></li> <li><a href="#">Calvin</a></li> <li><a href="#">Christina</a></li> <li><a href="#">Cindy</a></li></ul></body></html> -
蛊毒传说
你可以用startsWith它代替。if (txtValue.toUpperCase().startsWith(filter)) -
holdtom
// this function will help you to filter array on the basis of first // letter or wordconst collections = ["Ali","Ali and Asif", "Umar OR usman"];const searchByMultipleWords = ( collections, value) => { return collections.filter((collection) => { const collectionName = collection ? collection.toLowerCase() : ""; return collectionName.startsWith(value.toLowerCase()); });};console.log(searchByMultipleWords(collections,"ali")) -
慕尼黑的夜晚无繁华
您可以使用startsWith()函数来获取结果。function myFunction() { var input, filter, ul, li, a, i, txtValue; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); ul = document.getElementById("myUL"); li = ul.getElementsByTagName("li"); for (i = 0; i < li.length; i++) { a = li[i].getElementsByTagName("a")[0]; txtValue = a.textContent || a.innerText; if (txtValue.toUpperCase().startsWith(filter)) { li[i].style.display = ""; } else { li[i].style.display = "none"; } }}<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width, initial-scale=1"></head><body> <h2>My Phonebook</h2> <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"> <ul id="myUL"> <li><a href="#">Adele</a></li> <li><a href="#">Agnes</a></li> <li><a href="#">Agitha</a></li> <li><a href="#">Billy</a></li> <li><a href="#">Bob</a></li> <li><a href="#">Calvin</a></li> <li><a href="#">Christina</a></li> <li><a href="#">Cindy</a></li> </ul></body></html> -
杨__羊羊
function myFunction() { var input, filter, ul, li, a, i, txtValue; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); let filterLength = filter.length; ul = document.getElementById("myUL"); li = ul.getElementsByTagName("li"); for (i = 0; i < li.length; i++) { a = li[i].getElementsByTagName("a")[0]; txtValue = a.textContent || a.innerText; if (txtValue.substr(0, filterLength).toUpperCase() === filter) { li[i].style.display = ""; } else { li[i].style.display = "none"; } }} -
POPMUISE
你应该使用startsWith()而不是indexOf()在你的JS中替换if (txtValue.toUpperCase().indexOf(filter) > -1)和if (txtValue.toUpperCase().startsWith(filter))function myFunction() { var input, filter, ul, li, a, i, txtValue; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); ul = document.getElementById("myUL"); li = ul.getElementsByTagName("li"); for (i = 0; i < li.length; i++) { a = li[i].getElementsByTagName("a")[0]; txtValue = a.textContent || a.innerText; if (txtValue.toUpperCase().startsWith(filter)) { li[i].style.display = ""; } else { li[i].style.display = "none"; } }}* { box-sizing: border-box;}#myInput { background-image: url('/css/searchicon.png'); background-position: 10px 12px; background-repeat: no-repeat; width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px;}#myUL { list-style-type: none; padding: 0; margin: 0;}#myUL li a { border: 1px solid #ddd; margin-top: -1px; /* Prevent double borders */ background-color: #f6f6f6; padding: 12px; text-decoration: none; font-size: 18px; color: black; display: block}#myUL li a:hover:not(.header) { background-color: #eee;}<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width, initial-scale=1"></head><body> <h2>My Phonebook</h2> <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"> <ul id="myUL"> <li><a href="#">Adele</a></li> <li><a href="#">Agnes</a></li> <li><a href="#">Agitha</a></li> <li><a href="#">Billy</a></li> <li><a href="#">Bob</a></li> <li><a href="#">Calvin</a></li> <li><a href="#">Christina</a></li> <li><a href="#">Cindy</a></li> </ul></body></html>
随时随地看视频慕课网APP
相关分类
JavaScript
