Filter search for <ul>

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 ...

Asquith

i don't really get what you want. plus whathaveyoudone? as always – Fromenty

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 – Fromenty

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? – Buckbuckaroo

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. – Asquith

As an example of this product filter without having to use the jquerymobile view.jquerymobile.com/1.3.0/docs/widgets/listviews/#list-filter – Asquith

Answer 1

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

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

Oxytocin

Probably should use display = 'list-item'; – Apologete

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'. – Seagrave

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. – Encratia

Answer 2

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

Bathhouse

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. – Grimbly

Answer 3

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';
      }
    }
  );
}

Komarek

Answer 4

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

Daysidayspring