HTML5 Data Attributes Search using jQuery

Recently I had a requirement to search list of names, but everything should be done client side with less processing time. So, I started using Filtrify which is an advanced tag filtering plugin. It uses HTML5 data attributes, after trying I understood how good it was but it didn’t work for me.

Because it didn’t meet my ui requirements it generates a drop down navigation to select genre of movies, mine are not about movies.The ui I was planning is a simple text field which will hide the list of element which doesn’t match. So, I started digging
At first I created a text field from where I can search the list of name. Then I need to hide all non related names.

This is how my HTML looks

<input type="text" id="input"  onfocus="this.value = '';" value="Start Searching"/>
<ul>
   <li data-label="Ant">ant</li>
   <li data-label="apple">apple</li>
   <li data-label="ball">ball</li>
   <li data-label="bat">bat</li>
   <li data-label="bear">bear</li>
   <li data-label="bee">bee</li>
   <li data-label="book">book</li>
   <li data-label="bus">bus</li>
   <li data-label="car">car</li>
   <li data-label="cat">cat</li>
   <li data-label="cow">cow</li>
   <li data-label="dad">dad</li>
   <li data-label="day">day</li>
   <li data-label="dog">dog</li>
   <li data-label="duck">duck</li>
   <li data-label="egg">egg</li>
   <li data-label="fish">fish</li>
   <li data-label="frog">frog</li>
   <li data-label="goat">goat</li>
   <li data-label="gold">gold</li>
   <li data-label="go">go</li>
   <li data-label="happy">happy</li>
   <li data-label="hat">hat</li>
   <li data-label="lake">lake</li>
   <li data-label="leaf">leaf</li>
   <li data-label="lion">lion</li>
   <li data-label="map">map</li>
   <li data-label="mom">mom</li>
   <li data-label="moon">moon</li>
   <li data-label="nest">nest</li>
   <li data-label="pie">pie</li>
   <li data-label="robot">robot</li>
   <li data-label="sad">sad</li>
   <li data-label="seal">seal</li>
   <li data-label="ship">ship</li>
   <li data-label="sky">sky</li>
   <li data-label="star">star</li>
   <li data-label="stop">stop</li>
   <li data-label="sun">sun</li>
   <li data-label="tank">tank</li>
   <li data-label="tree">tree</li>
   <li data-label="truck">truck</li>
   <li data-label="van">van</li>
   <li data-label="worm">worm</li>
   <li data-label="zoo">zoo</li>
</ul>

In my html a text field with id input and a list of names with data attributes the same value resides inside data label which is inside list element.Then my jQuery snippet comes as follows

<script type="text/javascript">
   $.noConflict();
   jQuery(document).ready(function($) {
      // Read the value of text field when key is up
      $('#input').on( "keyup", function() {
      // get the value from text field
      var input = $(this).val();
      // by default every list element will be shown
      $("ul li").show();
      // Non related element will be hidden after input
      $("ul li").not("[data-label*="+ input +"]").hide();
   });
</script>

thats it we are done

Known issues

if data attributes has a uppercase letters and user inputs lowercase then search won’t work

Any Suggestion, Feedback or Contributions are appreciated