javascript - Ajax driven live search with arrow key scroll -


i making ajax driven live search . want click dropdown list (here #display div tag act that) fill html textbox id=name. how can modify codes include function user can scroll through results list using up/down arrow keys. here javascript code.

here javascript code in index.php file

<script type="text/javascript">     function fill(value)     {     $('#name').val(value);     $('#display').hide();     }      $(document).ready(function(){     $("#name").keyup(function() {     var name = $('#name').val();     if(name=="")     {     $("#display").html("");     }     else     {     $.ajax({     type: "post",     url: "ajax.php",     data: "name="+ name ,     success: function(html){     $("#display").html(html).show();     }     });     }     });     });     </script>                          <form  method="post" action="search.php" >                             <input type="text" value="enter product name here" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'enter product name here';}" name="name" id="name" required/>                             <input type="submit" value="search"/>                                                  </form>                         <div class="dis">                         <div id="displayl"></div>  <div id="display"></div>  </div>                     </div> 

and here code in ajax.php page

if(isset($_post['name']))      {      $name=trim($_post['name']);      $query=mysqli_query($con,"select * mobile name '%$name%' limit 0,5");      echo "<ul>";      while($query2=mysqli_fetch_array($query))      { ?>           <div class="ajaxcontainer">             <li onclick='fill("<?php echo $query2[' name ']; ?>")'>               <a href="preview.php?id=<?php  echo $query2['name']; ?>">                 <div class="ajaximage">                   <img src="<?php echo $query2['photo'];?>">                 </div>                 <div class="ajaxh1">                   <h1><?php  echo $query2['name']; ?></h1>                 </div>               </a>             </li>           </div>           <?php } } ?> 


Comments

Popular posts from this blog

java - pagination of xlsx file to XSSFworkbook using apache POI -

Unlimited choices in BASH case statement -

apache - How do I stop my index.php being run twice for every user -