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

Question

＆＃13;

＆＃13;

$(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>");
    });
  });
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

例如，只需输入＆＃34; a＆＃34;它会发现所有数据包括＆＃34; a＆＃34;或者输入＆＃34; ab＆＃34;它会找到包含＆＃34; ab＆＃34;。

的所有数据

如何实施此搜索功能？

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>
    

或者，如果您不想将它们推送到额外的数组，则可以在$(".roles_approval")上循环keyup并对文本内容执行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();    
        }
    });
});