堆栈内存溢出
  简体   繁体   English

基于首字母的过滤器搜索

[英]First letter based filter search

 原文  2020-12-11 06:30:26  7   6    javascript/ html/ jquery

问题描述

The problem is I want to filter the word in my list in first letter first format.问题是我想以首字母在前的格式过滤列表中的单词。

as you can see now I type the letter " a " in my search field, the result is all " a " related words.正如你现在看到的，我在我的搜索字段中输入字母“ a ”，结果是所有与“ a ”相关的词。 But I want the " a " first letter words only.但我只想要“ a ”的第一个字母。

Then I type " an " the result should be " an " starting words.然后我输入“ 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>

在此处输入图像描述

6 个解决方案

解决方案1
 1 已采纳  2020-12-11 06:40:07

This if (txtValue.toUpperCase().indexOf(filter) > -1) should be changed to这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>

解决方案2
 0  2020-12-11 06:41:06

You should use startsWith() instead of indexOf()您应该使用startsWith()而不是indexOf()

in you JS replace if (txtValue.toUpperCase().indexOf(filter) > -1)在你的 JS 中替换if (txtValue.toUpperCase().indexOf(filter) > -1)

with if (txtValue.toUpperCase().startsWith(filter))与if (txtValue.toUpperCase().startsWith(filter))

read more about String.prototype.startsWith()阅读更多关于String.prototype.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"; } } }
 * { 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>

解决方案3
 0  2020-12-11 06:41:45

You can use startsWith() function to get the results.您可以使用startsWith() function 来获得结果。 

 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>

解决方案4
 0  2020-12-11 06:42:27

You can use startsWith instead.您可以改用startsWith 。

if (txtValue.toUpperCase().startsWith(filter))

解决方案5
 0  2020-12-11 06:48:40

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";
        }
    }
}

解决方案6
 0  2023-02-01 12:16:44

 // this function will help you to filter array on the basis of first // letter or word const 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"))

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 根据首字母匹配搜索或过滤数据 - search or filter data based on first letter match 如何根据所包含属性的首字母过滤数组？ - How can I filter an array based on the first letter of a contained property? jQuery自动完成功能：按首字母过滤 - jQuery autocomplete: filter by first letter jQuery-自动完成过滤器按首字母匹配 - jQuery-autocomplete filter match by first letter jQuery按首字母过滤帖子-按字母顺序 - jQuery filter posts by their first letter - Alphabetically 根据首字母过滤ng-repeat - Filter ng-repeat according to the first letter 基于首字母的JavaScript字符串拆分和组织 - Javascript String splitting and Organizing based on first letter 基于字符串任意字母的搜索建议 - search suggestion based on any letter of string 在AngularJS中按名字的名字过滤人名单 - Filter list of people by first letter of first name in AngularJS 根据搜索过滤器修改URL - Modify URL based on search filter
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM