Прокрутка клавиши автозаполнения

Я делаю активный поиск в режиме Ajax. Но теперь я хочу щелкнуть раскрывающийся список, чтобы заполнить текстовое поле html. Как я могу изменить свои коды, чтобы включить функцию, в которой пользователь может прокручивать список результатов с помощью клавиш со стрелками вверх / вниз. Вот код JavaScript.

<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(); } }); } }); }); 

и вот код на странице ajax.php

 if(isset($_POST['name'])) { $name=trim($_POST['name']); $query=mysqli_query($con,"SELECT * FROM mobile WHERE name LIKE '%$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 } } ?> в if(isset($_POST['name'])) { $name=trim($_POST['name']); $query=mysqli_query($con,"SELECT * FROM mobile WHERE name LIKE '%$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 } } ?>