使用箭头键滚动的Ajax驱动的实时搜索

Question

我正在进行Ajax驱动的实时搜索。但是现在我想点击下拉列表（这里#display div标签就像那样）来填充带有id = name的html文本框。如何修改我的代码以包含一个功能，用户可以使用向上/向下箭头键滚动结果列表。这是JavaScript代码。

这是index.php文件中的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();
    }
    });
    }
    });
    });
    </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>

这是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 } } ?>