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>

Answer 2

这里有一些问题......

在jQuery中，$('#emotions')的等价物是$("emotions")。例如，当您使用<emotions>时，它会查找li[i]个元素，而不是ID。
在您的for中，当您使用li[i].find时，它不是jQuery元素，因此您无法使用li.eq(i)。要转换为jQuery元素，您可以使用：a）$(li[i])或b）$("#search_emotions").on("input", function(){ var input, filter, ul, li, a, i; input = $(this); filter = input.val(); ul = $("#emotions"); li = $("#emotions li"); for (i = 0; i < li.length; i++) { a = li.eq(i).find("div")[0]; if (a.innerHTML.indexOf(filter) > -1) { li[i].style.display = ""; } else { li[i].style.display = "none"; } } });。

有一个工作示例，非常类似于您发布的示例：

＆＃13;

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

＆＃13;

{{1}}

＆＃13;

PS：https://stackoverflow.com/a/49685340/2056593有更多＆＃34; jquery＆＃34;方式示例。

将旧的javascript函数更新为jquery函数not working snippet

2 个答案: