谷歌样式自动完成与箭头键

时间:2011-06-12 01:06:06

标签: javascript ajax arrow-keys

我创建了一个简单的搜索引擎,使用php“LIKE”函数显示mysql数据库结果(下面的代码)。一切正常。我只想这样做,以便当用户开始输入时,他/她可以使用箭头键向下滚动并按下像谷歌一样的项目。谢谢。我的代码:

HTML:

<input type="text" name='search' id="searchbooks" onkeyup='getbooks(this.value);'       value="search" onblur="setTimeout('removedrop()', 80);">

<div id='drop'></div>   

JAVASCRIPT:

function getbooks(value){
    if (value!=""){



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

        }
        else {

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

}
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>";

}
?>

1 个答案:

答案 0 :(得分:0)

如何使用jQuery autocomplete plugin?它就是针对这个用例而制作的。

enter image description here