javascript - 将旧的 javascript 函数更新为 jquery 函数不工作的代码片段

Question

我想将此 Javascript 函数更新为 Jquery，我需要将其与 on("input",function...

这是一个实时搜索功能......

这是一个基本形式，但很有用，当我尝试使用 Jquery .val("") 重置输入时，问题就出现了，这会清除它，但不会清除搜索结果... 所以需要更新。

我尝试过，但不起作用

$("#search_emotions").on("input",function(){
 var input, filter, ul, li, a, i;
 input = $("search_emotions");
 filter = input.val();
 ul = $("emotions");
   li = $("emotions li");

    for (i = 0; i < li.length; i++) {
    a = li[i].find("div")[0];
    if (a.innerHTML.indexOf(filter) > -1) {
        li[i].style.display = "";
    } else {
        li[i].style.display = "none";

    }
}


 });

function SearchEmotions() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("search_emotions");
    filter = input.value;
    ul = document.getElementById("emotions");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("div")[0];
        if (a.innerHTML.indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";

        }
    }
}

<input type=text id='search_emotions' onkeyup="SearchEmotions();" placeholder="Search emotions" />

<ul class="emotions" id="emotions">
<li ><div class="emotion_1">A</div></li>
<li ><div class="emotion_2">B</div></li>
<li ><div class="emotion_3">CF</div></li>
<li ><div class="emotion_4">DE</div></li>
<li ><div class="emotion_5">E</div></li>
<li ><div class="emotion_6">FA</div></li>
<li ><div class="emotion_7">GB</div></li>
<li ><div class="emotion_8">HC</div></li>
</ul>

Answer 1

检查更新

$("#search_emotions").on("input",function(){
  var input, filter, ul, li, a, i;
  input = $("#search_emotions");
  filter = input.val();
  ul = $("#emotions");
   
  ul.find('li').each(function(){
      var a = $(this).find("div").text();
      if( a.indexOf(filter) > -1) {
          $(this).css("display", "");
      } else {
          $(this).css("display", "none");
      }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type=text id='search_emotions'  placeholder="Search emotions" />

<ul class="emotions" id="emotions">
<li ><div class="emotion_1">A</div></li>
<li ><div class="emotion_2">B</div></li>
<li ><div class="emotion_3">CF</div></li>
<li ><div class="emotion_4">DE</div></li>
<li ><div class="emotion_5">E</div></li>
<li ><div class="emotion_6">FA</div></li>
<li ><div class="emotion_7">GB</div></li>
<li ><div class="emotion_8">HC</div></li>
</ul>