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
Post a Comment