Filter search for

Question

I have a list of users as well:

<ul>
<li class="thumb selectable arrow light" style="margin-bottom:-5px;"
data-image="http://cdn.tapquo.com/lungo/icon-144.png">
<strong class="name">Peter <font data-count="0" style="position:relative;top:-2px;"> </font></strong> 
<small class="description">Hi!</small> 
</li>
...
</ul>

what I want is a text input each time you write a letter to display only users that start with that letter or that they might have the name. As I can do? It is with jquery but not as ...

i don't really get what you want. plus whathaveyoudone? as always — btevfik, Mar 24 '13 at 11:15
as far as i undersand. you have a list of users and a text input. when we start typing, you want the users that match to showup somewhere — btevfik, Mar 24 '13 at 11:17
I'm absolutely confuzzled. Can you please specify in steps what you want to achieve? Do you want an `input` field that has a listener and checks if each letter inserted in it starts with a letter? — , Mar 24 '13 at 11:17
So what you say btevfik, I have a list of users and an input whenever users enter a letter not containing those letters disappear and remain only those that match. — Jaumesv, Mar 24 '13 at 11:21
As an example of this product filter without having to use the jquerymobile http://view.jquerymobile.com/1.3.0/docs/widgets/listviews/#list-filter — Jaumesv, Mar 24 '13 at 11:23

Daniel Imms · Accepted Answer · 2013-10-24T16:40:24.743

33

Here is a input that filters a <ul> based on the value in pure JavaScript. It works by handling the onkeyup and then getting the <li>s and comparing their inner element .name with the filter text.

jsFiddle

enter image description here

var input = document.getElementById('input');
input.onkeyup = function () {
    var filter = input.value.toUpperCase();
    var lis = document.getElementsByTagName('li');
    for (var i = 0; i < lis.length; i++) {
        var name = lis[i].getElementsByClassName('name')[0].innerHTML;
        if (name.toUpperCase().indexOf(filter) == 0) 
            lis[i].style.display = 'list-item';
        else
            lis[i].style.display = 'none';
    }
}

edited Oct 24 '13 at 16:40

answered Mar 24 '13 at 11:19

Daniel Imms

47,944
19
150
166

1

Probably should use `display = 'list-item';` – Koen. Oct 24 '13 at 16:19
Please extend the answer to search for name that matches either first name or last name. Should display if search matches any of the names(first or last). In the above case 'Andrew' or 'Hi'. – Mr_Perfect Jan 30 '17 at 08:18
To search for matches anywhere in the in the word, use `if (name.toUpperCase().indexOf(filter) != -1)` instead. `-1` is used to denote no matches. – Sašo Apr 25 '17 at 05:14

score 2 · Answer 2 · answered Mar 31 '22 at 00:35

alterei o codigo do Daniel Imms pra procurar qualquer parte do nome e funciona com classes

var input = document.getElementById('seachUser');
input.onkeyup = function () {
    var filter = input.value.toUpperCase();
    var lis = document.getElementsByClassName('listUser');
    for (var i = 0; i < lis.length; i++) {
        var name = lis[i].getElementsByClassName('userName')[0].innerHTML;
        if (name.toUpperCase().includes(filter)) 
            lis[i].style.display = 'list-item';
        else
            lis[i].style.display = 'none';
    }
}

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Mar 31 '22 at 01:56

Elias Glyptis · Answer 3 · 2021-01-26T02:03:15.477

So you have a collection of list items inside an unordered list like this.

<div class="some-input-field-class">
   <input type="text" name="filter" id="filter">
   <label for="filter">Filter Names</label>
</div>

<ul class="my-user-collection">
  <li class="thumb selectable arrow light" style="margin-bottom:-5px;"
  data-image="http://cdn.tapquo.com/lungo/icon-144.png">
  <strong class="name">Peter <font data-count="0" style="position:relative;top:-2px;"> </font></strong> 
  <small class="description">Hi!</small> 
  </li>
  ...
</ul>

You can add this in your javascript file. But you will need to load the event listener too. You probably have a few events so just do what you need to do. Maybe add it to another function where you load the rest of your event listeners.

// Load the event listener
document.querySelector('#filter').addEventListener('keyup', filterNames);

Function to iterate through the li by targeting the class, iterate through the array since we use querySelectorAll and NOT getElementByID. -1 means no match.

function filterNames(e) {
  const text = e.target.value.toLowerCase();
  document.querySelectorAll('.selectable').forEach(
    function(name) {
      let item = name.firstChild.textContent;
      if (item.toLowerCase().indexOf(text) != -1) {
        name.style.display = 'block';
      } else {
        name.style.display = 'none';
      }
    }
  );
}

score 0 · Answer 4 · edited Aug 12 '22 at 17:27

Use this if you are parsing the cls to HTML:

var input = document.getElementById('myInput');
input.onkeyup = function () {
  var filter = input.value.toUpperCase();
  var lis = document.getElementsByTagName('li');
  for (var i = 0; i < lis.length; i++) {
    var name = lis[i].innerText;
    if (name.toUpperCase().indexOf(filter) == 0) 
      lis[i].style.display = 'list-item';
    else
      lis[i].style.display = 'none';
  }
}

Filter search for

4 Answers4

Linked