title: How to perform search function after using jQuery add data?
body: <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
  
    $(function(){
      var roles = ["Admin", "User", "Dealer", "Agent", "Buyer", "Guest", "User", "Dealer", "Agent"];
  
      $.each(roles, function(){
        $(".role_wrapper_2").append("&lt;div class='roles_approval'&gt;&lt;span&gt;" + this + "&lt;/span&gt;&lt;/div&gt;");
      });
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="role_wrapper_2"&gt;
    &lt;div class="admin2_search"&gt;
      &lt;form&gt;
        &lt;input class="role-search-approval" type="search" placeholder="Enter your keyword"&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I use jQuery to add some data when page is load and also add a search box for user to find these data more quickly and it will search word by word.</p>
  
  <p>For example, just type "a" it will find all data include "a" or type "ab" it will find all data that include "ab".</p>
  
  <p>What can I do to implement this search function?</p>