Javascript 谷歌风格的箭头键自动完成

我创建了一个简单的搜索引擎，它使用php“LIKE”函数（下面的代码）显示mysql数据库结果。一切正常。我只想这样，当用户开始键入时，他/她可以使用箭头键向下滚动并按enter键，就像谷歌一样。谢谢我的代码：

HTML:

}
getbooks.php文件：

<?php
include 'connect.php';

$book=mysql_real_escape_string(addslashes($_POST['book']));

$result=mysql_query("SELECT * FROM searchengine WHERE title LIKE '$book%'");


while ($row=mysql_fetch_assoc($result)){
$title=$row['title'];
$id=$row['id'];


echo "<div id='link'><a href='index.php?id=$id' id='words'>". $row['title'] ."</a></div>";

}
?>

如何使用？它正是为这个用例而设计的

嗯。我不知道我的另一半对那件事有什么感觉，马特我只是浏览了一下那些文件。对于这么小的调整来说，这似乎非常复杂。我已经有了我的道歉，我实际上链接到了一个非常旧的版本。我更新了答案中的链接（和图片）。希望您会发现最新的“自动完成”更易于使用。@matt有没有办法创建下拉项目链接？还有一种在用户滚动鼠标时从文本框中删除鼠标悬停名称的方法。
function getbooks(value){
    if (value!=""){



    $.post('getbooks.php', {book: value},
        function (data) {
            $('#drop').html(data);
            doCSS();                
        });

        }
        else {

        $('#drop').html("");
        undoCSS();
        }

<?php
include 'connect.php';

$book=mysql_real_escape_string(addslashes($_POST['book']));

$result=mysql_query("SELECT * FROM searchengine WHERE title LIKE '$book%'");


while ($row=mysql_fetch_assoc($result)){
$title=$row['title'];
$id=$row['id'];


echo "<div id='link'><a href='index.php?id=$id' id='words'>". $row['title'] ."</a></div>";

}
?>