javascript - フィルタ検索

Question

ユーザーのリストもあります：

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

私が欲しいのは、あなたが手紙を書くたびに、その手紙で始まるユーザー、または彼らが名前を持っているかもしれないユーザーだけを表示するためのテキスト入力です。私にできることは？jqueryを使用しますが、...ではありません。

Answer 1

これは、純粋なJavaScriptの値に基づいinputてフィルターをかけるものです。<ul>これは、を処理してからsをonkeyup取得し、それらの内部要素をフィルターテキスト<li>と比較することで機能します。.name

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

Answer 2

したがって、このような順序付けされていないリスト内にリストアイテムのコレクションがあります。

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

これをjavascriptファイルに追加できます。ただし、イベントリスナーもロードする必要があります。おそらくいくつかのイベントがあるので、必要なことを実行してください。たぶん、残りのイベントリスナーをロードする別の関数に追加します。

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

クラスをターゲットにしてliを反復処理する関数。getElementByIDではなくquerySelectorAllを使用するため、配列を反復処理します。-1は一致しないことを意味します。

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