jquery+php实现搜索框自动提示
前端之家 收集整理的这篇文章主要介绍了
jquery+php实现搜索框自动提示 ，
前端之家 小编觉得挺不错的，现在分享给大家，也给大家做个参考。
今天突然想给本站做个搜索 页面 ，这样用户 可以通过搜索 来找到自己喜欢的内容 ，也避免了在海量信息中手动查找资源的麻烦，我的目标和百度 首页 的效果 类似，当用户 输入要搜索 的文字 时，我们在下方给出相关的十条信息，如果用户 要找的就是这十条信息内的某一条，那么简单，直接点击就可在新页面 中打开页面 ，主要就是想更人性化一点，让用户 使用起来更方便。
先看一下效果 图吧，这样更有动力，要不然大家还不知道我在讲什么，到底要达到什么样的效果 ！
jquery+PHP 实现搜索 框自动 提示
下面先主要讲解原理：
在search.html页面 中，用户 在搜索 框内输入“j”时，使用javascript获取 搜索 框的文本内容 ，到数据库 中查找相关的内容 并返回，再使用javascript将服务器返回的结果显示 在搜索 框下面的提示 框内，供用户 参考选择。
具体的实现方法 ：
首先在页面 中做好搜索 框、搜索 按钮、显示 搜索 提示 的层，如下代码
使用浏览器浏览页面 ，会看到下图的效果
jquery+PHP 实现用户 输入搜索 内容 时自动 提示
看起来很普通，没什么样式，现在稍作样式上的调整
搜索框宽度设置大点*/
再将显示 搜索 提示 的层样式调整一下，由于搜索 提示 层在搜索 框正下方，所以我们设置其定位方式为绝对定位
定位方式*/
接着用JS将搜索 提示 层的位置放置在搜索 框正下方，且宽度和搜索 框相同，这里我们采用jQuery来解决
40462">
$('#search_auto').css({'width':$('#search input[name="k"]').width()+4});
搜索 提示 层的位置和宽度已经确定好了，由于在用户 没有输入搜索 文字 前这个提示 框是不显示 的，所以我们先要将它设置成隐藏，在提示 层的样式里加上 display:none将其隐藏。
已经全部OK了，现在只要给搜索 框的onkeyup注册 事件即可，我们依然采用jQuery来处理，在jQuery中是keyup
PHP',{'value':$(this).val()},function(data){ //向服务器上的search_auto.
PHP 发送post数据，$.post是jQuery的
方法
if(data=='0') $('#search_auto').html('').css('display','none'); //判断服务器上返回的数据，如果等于０，则表示没有找到相关的
内容 ，所以将
提示 框的
内容 清空并隐藏
else $('#search_auto').html(data).css('display','block'); //如果服务器上返回的数据不等于０，则将返回的
内容 放到
提示 框内并
显示 提示 框
});
});
上面客户端已经做好了，已经可以将用户 输入的内容 发送到服务器端，并响应服务器的返回值。
那么服务器端如何处理客户端发送来的数据呢，下面用PHP 来举个例子
PHP;">
PHP
$v=$_POST[value];
$re=
MysqL _query("select * from test where title like '%$v%' order by addtime desc limit 10"); //根据客户端发送来的数据，到
数据库 中
查询 10条相关的结果
if(
MysqL _num_rows($re)<=0) exit('0'); //判断
查询 结果，如果没有相关的结果，那么直接返回0
echo '
';
while($ro=MysqL _fetch_array($re)) echo ''; //输入一个关闭按钮，让用户不想看到提示层时可以点击关闭，关闭按钮采用jQuery，解释一下，当前点击的按钮是$(this)，一直向上找到其第三个父元素，让它逐渐消失
echo ' ';
?>
现在服务器已经可以正确的执行我们发送过去的数据了，并且返回相应的结果，那么现在在搜索框内输入一个文字测试一下吧，但前提是你的数据库中得有与这个文字相关的内容啊，要不然你也看不到提示框的出现，因为没有相关提示内容啊，呵呵。
可是还有点美中不足，那就是提示框里面的内容不美观，和我们在百度搜索中看到的提示框相比，简直是太丑了，哈哈，不急，我们再用css来调整显示的效果
提示框内的li
标签 效果 */
#search_auto li.cls{text-align:right;} /*设置
提示 框内的
关闭 按钮
效果 */
#search_auto li a{display:block; padding:5px 6px; cursor:pointer; color:#666;} /*设置
提示 框内li
标签 下的a
标签 效果 */
#search_auto li a:hover{background:#D8D8D8; text-decoration:none; color:#000;} /*当鼠标移入
提示 框内时的
效果 */
现在才算是真正的完全制作完成，至于要不要设置一个延迟处理，或是其它更完善的功能 ，留给朋友们自己开动脑筋了，大家也可以在下面回复 你的想法，等等。
客户端完整代码 ：
