Question

For example my html is like below,

<div id="mainDiv">
   <div id="1">This is animal page</div>
   <div id="2">No animal here</div>
   <div id="3">Jame Bond</div>
   <div id="4">Simple Bond</div>
</div>

And I have a input field like this

<input type="text" id="search">

While searching anything it has to list the result in other div.

Like when I search for keyword bond it should show like below

<div id="mainDiv">
   <div id="3">Jame Bond</div>
   <div id="4">Simple Bond</div>
</div>

Answer 1

A little further with Blender’s answer,
Try this

<input type="text" id="search" onkeyup="search(this.value);">
  <div id="mainDiv">
     <div id="1">This is animal page</div>
     <div id="2">No animal here</div>
     <div id="3">Jame Bond</div>
     <div id="4">Simple Bond</div>
  </div>

<script type="text/javascript">
    function search(text) {
       var search_string = text;
       var all = $('#mainDiv > div');

       all.css({ "display": "none" });

       var $matched = $('#mainDiv > div').filter(function () {
          return $(this).text().toLowerCase().indexOf(search_string) !== -1;
       });

       $matched.css({ "display": "block" });
     }
</script>

Demo link : http://jsbin.com/ocugug/1