javascript - 使用jQuery添加数据后如何执行搜索功能？

Question

$(document).ready(function(){

  $(function(){
    var roles = ["Admin", "User", "Dealer", "Agent", "Buyer", "Guest", "User", "Dealer", "Agent"];

    $.each(roles, function(){
      $(".role_wrapper_2").append("<div class='roles_approval'><span>" + this + "</span></div>");
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="role_wrapper_2">
  <div class="admin2_search">
    <form>
      <input class="role-search-approval" type="search" placeholder="Enter your keyword">
    </form>
  </div>
</div>

我使用 jQuery 在页面加载时添加一些数据，并添加一个搜索框，以便用户更快地找到这些数据，并且它会逐字搜索。

例如，只需键入“a”，它将查找所有包含“a”的数据，或者键入“ab”，它将查找包含“ab”的所有数据。

如何实现这个搜索功能？

Answer 1

您可以将所有 jquery 元素推送到一个数组，然后迭代 roles 数组并执行 .indexOf()。

$(document).ready(function(){

  $(function(){
    var roles = ["Admin", "User", "Dealer", "Agent", "Buyer", "Guest", "User", "Dealer", "Agent"];
    
    var elements = [];

    $.each(roles, function(){
      var element = $("<div class='roles_approval'><span>" + this + "</span></div>");
      elements.push(element);
      $(".role_wrapper_2").append(element);
    });
    
    $(".role-search-approval").on("keyup" /* or input event*/, function() {
      var value = this.value.toLowerCase();
      for(var i = 0; i < roles.length; i++) {
        if(roles[i].toLowerCase().indexOf(value) !== -1) {
          elements[i].show();
        } else {
          elements[i].hide();    
        }
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="role_wrapper_2">
  <div class="admin2_search">
    <form>
      <input class="role-search-approval" type="search" placeholder="Enter your keyword">
    </form>
  </div>
</div>
    

或者，如果您不想将它们推送到额外的数组，您可以在 keyup 上循环遍历 $(".roles_approval") 并执行 indexOf关于文本内容。

$(".role-search-approval").on("keyup" /* or input event*/, function() {
    var value = this.value.toLowerCase();
    $(".roles_approval").each(function() {
        if($(this).text().toLowerCase().indexOf(value) !== -1) {
            $(this).show();
        } else {
            $(this).hide();    
        }
    });
});