带有箭头键的谷歌风格自动完成
我创建了一个简单的搜索引擎,使用 php“LIKE”函数(下面的代码)显示 mysql 数据库结果。一切正常。我只想做到这一点,以便当用户开始输入时,他/她可以使用箭头键向下滚动并在某个项目上按 Enter 键,就像谷歌一样。谢谢。我的代码:
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>";
}
?>
i created a simple search engine that displays mysql database results using the php "LIKE" function (code below). everything works fine. i would just like to make it so that when the user starts typing he/she can use the arrow keys to scroll down and press enter on an item just like google. thanks. my code:
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 file:
<?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>";
}
?>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
使用 jQuery 自动完成插件怎么样?它正是针对这个用例而设计的。
How about using the jQuery autocomplete plugin? It's made for exactly this use case.