title: Search for word and highlight with jquery
body: <p>I have written a javaScript file in jQuery that provides a search function. I am trying to figure out how to highlight the word aswell. Bellow is the code. </p>
  
  <p>Filter.js:</p>
  
  <pre><code>(function ($) {
    // custom css expression for a case-insensitive contains()
    jQuery.expr[":"].Contains = jQuery.expr.createPseudo(function(arg) {
      return function( elem ) {
          return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) &gt;= 0;
      };
  });
  
  
  function listFilter(header, list, title) { 
     // header is any element, list is an unordered list, title is any element
     // create and add the filter form to the header
     // create a button for collapse/expand to the title
  
  var form = $("&lt;form&gt;").attr({"class":"filterform","action":"#"}),
      button = $("&lt;input&gt;").attr({"class":"rest", "type":"submit", "value":"Collapse All", "id":"switch"}),
      input = $("&lt;input&gt;").attr({"class":"filterinput","type":"text", "placeholder":"Search"});
  
  $(form).append(input).appendTo(header); //add form to header
  $(title).append(button); //add button to title
  
   //on click function for collapse/expand all
  $("#switch").click(function(){
      if($(this).val() == "Collapse All"){
          $(".filterinput").val("");
          $(this).val("Expand All");
          $("div.content div.markdown").parent().parentsUntil(list).hide();
          $(list).find("span.path").parentsUntil(list).show();
          $(list).find("ul.endpoints").css("display", "none");
      }
      else{
          $(".filterinput").val("");
          $(this).val("Collapse All");
          $("div.content div.markdown").parent().parentsUntil(list).hide();
          $(list).find("span.path").parentsUntil(list).show();
      }
  });
  
  $(input)
    .change( function () {
      var filter = $(this).val();
      if(filter) {
        // this finds a single string literal in div.markdown,
        // and hides the ones not containing the input while showing the ones that do
          $(list).find("div.content div.markdown:not(:Contains(" + filter + "))").parent().parentsUntil(list).hide();
          $(list).find("div.content div.markdown:Contains(" + filter + ")").parent().parentsUntil(list).show();
      } 
      else {
          $("div.content div.markdown").parent().parentsUntil(list).hide();
          $(list).find("span.path").parentsUntil(list).show();
          $(list).find("ul.endpoints").css("display", "none");
      }
      return false;
    })
  .keyup( function () {
      // fire the above change event after every letter
      $(this).change();
  });
  }
     //ondomready
     setTimeout(function () {
      listFilter($("#header"), $("#resources"), $("#api_info"));
     }, 250);
  }(jQuery));
  </code></pre>
  
  <p>The html that I would like to manipulate is being dynamically created by another JS file so I need to manipulate the DOM after it has been completely rendered.. The html that I will be focusing on gets rendered as bellow, specifially the words in (div class="markdown").</p>
  
  <p>Index.html:</p>
  
  <pre><code>&lt;div class="content" id="connectivitypacks_get_connectivitypacks_content"&gt;
      &lt;h4&gt;Description&lt;/h4&gt;
      &lt;div class="markdown"&gt;&lt;p&gt;Response will return details for the connectivity packs based on the ID.&lt;/p&gt;
          &lt;h2 id="keywords"&gt;Keywords&lt;/h2&gt;
          &lt;p&gt; foo, bar, helloWorld, java&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>