admin管理员组

文章数量:1391929

I'm having problems with the filter result, here is my HTML:

<input type="text" class="form-control" id="populerNameKey">

The list item:

<ul id="destPopuler">
  <li class="country">England</li>
  <li class="testing"><a href="#">Liverpool</a></li>
  <li class="testing"><a href="#">London</a></li>
  <li class="country">Italy</li>
  <li class="testing"><a href="#">Roma</a></li>
  <li class="testing"><a href="#">Milan</a></li>
</ul>

and the plete JavaScript here: jsfiddle

The problem is when I type "Spain" letter by letter, the result is lost. I want that it still exists. Anybody knows how to fix it?

I'm having problems with the filter result, here is my HTML:

<input type="text" class="form-control" id="populerNameKey">

The list item:

<ul id="destPopuler">
  <li class="country">England</li>
  <li class="testing"><a href="#">Liverpool</a></li>
  <li class="testing"><a href="#">London</a></li>
  <li class="country">Italy</li>
  <li class="testing"><a href="#">Roma</a></li>
  <li class="testing"><a href="#">Milan</a></li>
</ul>

and the plete JavaScript here: jsfiddle

The problem is when I type "Spain" letter by letter, the result is lost. I want that it still exists. Anybody knows how to fix it?

  • javascript
  • jquery
  • html
  • list
Share Improve this question edited Jul 22, 2020 at 8:51 Andreas 5,61810 gold badges47 silver badges55 bronze badges asked Jul 28, 2017 at 3:17 dedi wibisonodedi wibisono 5335 gold badges12 silver badges23 bronze badges 2
  • what is the bug ? what is happening what is expected? – guradio Commented Jul 28, 2017 at 3:18
  • if i typing "liverpool" letter by letter, the result is lost. I want it still exist @guradio – dedi wibisono Commented Jul 28, 2017 at 3:20
Add a ment  | 

4 Answers 4

Reset to default 4

In your code get problem when you type liverpol with lower case first and your text value is have a proper value, with Upper case first. You should same your input value and search value text fist.

You can do that with

.toLowerCase function

.toUpperCase funtion

here some link for reference toLowerCase toUpperCase

$("#populerNameKey").on('keyup', function(){
var value = $(this).val().toLowerCase();
$("#destPopuler li").each(function () {
    if ($(this).text().toLowerCase().search(value) > -1) {
        $(this).show();
        $(this).prev('.country').last().show();
    } else {
        $(this).hide();
    }
});   
})


function myFunction() {
    var input, filter, ul, li, a, i;
    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];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            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.header {
  background-color: #e2e2e2;
  cursor: default;
}

#myUL li a:hover:not(.header) {
  background-color: #eee;
}
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</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="#" class="header">A</a></li>
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>

  <li><a href="#" class="header">B</a></li>
  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>

  <li><a href="#" class="header">C</a></li>
  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
</ul>

<script>
</script>

</body>
</html>

try this one.

Use .toLowerCase() on both the input and the value of the list item

You're paring upper-case letters with lower-case letters.

Looks like you need a case insensitive search. You could use a regular expression (RegExp) with an ignore case (i) flag. Like RegExp(value, "i"). This will ignore the case while doing a parison. So, you've to change

$(this).text().search(value) > -1

to

$(this).text().search(RegExp(value, "i")) > -1

本文标签： javascriptList Viewsearch list with filter using jQueryStack Overflow

版权声明：本文标题：javascript - List View - search list with filter using jQuery - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744699246a2620465.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。