php 搜索框提示(自动完成)实例代码


Posted in PHP onFebruary 05, 2012

百度的搜索大家都在用,当用户输入文字时,搜索框下面自动提示相关的信息,加强了用户体验,的确不错,那么这个效果是如何实现的呢

先看一下效果图吧,这样更有动力,要不然大家还不知道我在讲什么,到底要达到什么样的效果!

php 搜索框提示(自动完成)实例代码

下面先主要讲解原理:

在search.html页面中,用户在搜索框内输入“j”时,使用javascript获取搜索框的文本内容,到数据库中查找相关的内容并返回,再使用javascript将服务器返回的结果显示在搜索框下面的提示框内,供用户参考选择。

具体的实现方法:

首先在页面中做好搜索框、搜索按钮、显示搜索提示的层,如下代码

<div id="search">
<input type="text" name="k" /> <input type="button" name="s" value="搜索" />
</div>
<div id="search_auto"></div>

使用浏览器浏览页面,会看到下图的效果

php 搜索框提示(自动完成)实例代码

 

看起来很普通,没什么样式,现在稍作样式上的调整

#search{font-size:14px;}
#search .k{padding:2px 1px; width:320px;} /*将搜索框宽度设置大点WEB开发笔记(www.chhua.com)*/

再将显示搜索提示的层样式调整一下,由于搜索提示层在搜索框正下方,所以我们设置其定位方式为绝对定位

#search_auto{border:1px solid #817FB2; position:absolute;} /*设置边框、定位方式*/

接着用JS将搜索提示层的位置放置在搜索框正下方,且宽度和搜索框相同,这里我们采用jQuery来解决

$(‘#search_auto').css({‘width':$(‘#search input[name="k"]‘).width()+4});

搜索提示层的位置和宽度已经确定好了,由于在用户没有输入搜索文字前这个提示框是不显示的,所以我们先要将它设置成隐藏,在提示层的样式里加上display:none将其隐藏。

已经全部OK了,现在只要给搜索框的onkeyup注册事件即可,我们依然采用jQuery来处理,在jQuery中是keyup

$('#search input[name="k"]').keyup(function(){
$.post('search_auto.php',{'value':$(this).val()},function(data){  //向服务器上的search_auto.php发送post数据,$.post是jQuery的方法
if(data=='0') $('#search_auto').html('').css('display','none');  //判断服务器上返回的数据,如果等于0,则表示没有找到相关的内容,所以将提示框的内容清空并隐藏WEB开发笔记(www.chhua.com)*/
else $('#search_auto').html(data).css('display','block');  //如果服务器上返回的数据不等于0,则将返回的内容放到提示框内并显示提示框
});
});

上面客户端已经做好了,已经可以将用户输入的内容发送到服务器端,并响应服务器的返回值。

 

那么服务器端如何处理客户端发送来的数据呢,下面用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 '<ul>';
while($ro=mysql_fetch_array($re)) echo '<li><a href="">'.$ro[title].'</a></li>';  //将查询得到的相关结果的标题输出,这个地方需要注意,由于通过jQuery的ajax技术返回的文本是UTF-8编码,所以如果$ro[title] 中包含中文,一定要记得用PHP的iconv或其它函数将其转换成UTF-8编码,否则在页面中看到的会是一串乱码
echo '<li><a href="javascript:;" onclick="$(this).parent().parent().parent().fadeOut(100)">关闭</a& amp; gt;</li>';  //输入一个关闭按钮,让用户不想看到提示层时可以点击关闭,关闭按钮采用jQuery,解释一下,当前点击的按钮是$(this),一直向上找到其第三个父元素,让它逐渐消失WEB开发笔记(www.chhua.com)*/
echo '</ul>';
?>

现在服务器已经可以正确的执行我们发送过去的数据了,并且返回相应的结果,那么现在在搜索框内输入一个文字测试一下吧,但前提是你的数据库中得有与这个文字相关的内容啊,要不然你也看不到提示框的出现,因为没有相关提示内容啊,呵呵。

可是还有点美中不足,那就是提示框里面的内容不美观,和我们在百度搜索中看到的提示框相比,简直是太丑了,哈哈,不急,我们再用css来调整显示的效果

 

#search_auto li{background:#FFF; text-align:left;} /*设置提示框内的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;} /*当鼠标移入提示框内时的效果*/

现在才算是真正的完全制作完成,至于要不要设置一个延迟处理,或是其它更完善的功能,留给朋友们自己开动脑筋了,大家也可以在下面回复你的想法,等等。

客户端完整代码:

<html>
<head>
<style>
#search{font-size:14px;}
#search .k{padding:2px 1px; width:320px;}
#search_auto{border:1px solid #817FB2; position:absolute; display:none;}
#search_auto li{background:#FFF; text-align:left;}
#search_auto li.cls{text-align:right;}
#search_auto li a{display:block; padding:5px 6px; cursor:pointer; color:#666;}
#search_auto li a:hover{background:#D8D8D8; text-decoration:none; color:#000;}
</style>
<title>jquery+php实现用户输入搜索内容时自动提示</title>
</head>

<body>
<div id=”search”>
<input type=”text” name=”k” /> <input type=”button” name=”s” value=”搜索” />
</div>
<div id=”search_auto”></div>
</body>
</html>

<script src=”jQuery.js”></script>
<script>
$(function(){

$(‘#search_auto').css({‘width':$(‘#search input[name="k"]‘).width()+4});
$(‘#search input[name="k"]‘).keyup(function(){
$.post(‘search_auto.php',{‘value':$(this).val()},function(data){
if(data=='0′) $(‘#search_auto').html(”).css(‘display','none');
else $(‘#search_auto').html(data).css(‘display','block');
});
});

});
</script>

服务器端完整代码:

<?php
$v=$_POST[value];
$re=mysql_query("select * from test where title like '%$v%' order by addtime desc limit 10");
if(mysql_num_rows($re)<=0) exit('0');
echo '<ul>';
while($ro=mysql_fetch_array($re)) echo '<li><a href="">'.$ro[title].'</a></li>';
echo '<li><a href="javascript:;" onclick="$(this).parent().parent().parent().fadeOut(100)">关闭</a& amp; gt;</li>';
echo '</ul>';
?>

PHP 相关文章推荐
PHP脚本的10个技巧(4)
Oct 09 PHP
PHP面向对象的使用教程 简单数据库连接
Nov 25 PHP
php MySQL与分页效率
Jun 04 PHP
PHP面向对象概念
Nov 06 PHP
PHP计数器的实现代码
Jun 08 PHP
PHP实现服务器状态监控的方法
Dec 09 PHP
PHP之浮点数计算比较以及取整数不准确的解决办法
Jul 29 PHP
PHP引用返回用法示例
May 28 PHP
PHP实现的曲线统计图表示例
Nov 10 PHP
PHP基于新浪IP库获取IP详细地址的方法
May 04 PHP
PHP 断点续传实例详解
Nov 11 PHP
PHP join()函数用法与实例讲解
Mar 11 PHP
PHP持久连接mysql_pconnect()函数使用介绍
Feb 05 #PHP
PHP测试程序运行时间的类
Feb 05 #PHP
PHP设计模式 注册表模式
Feb 05 #PHP
PHP设计模式 注册表模式(多个类的注册)
Feb 05 #PHP
需要注意的几个PHP漏洞小结
Feb 05 #PHP
PHP的可变变量名的使用方法分享
Feb 05 #PHP
PHP中如何判断AJAX提交的数据
Feb 05 #PHP
You might like
异步加载技术实现当滚动条到最底部的瀑布流效果
2014/09/16 PHP
php进行ip地址掩码运算处理的方法
2016/07/11 PHP
PHP中模糊查询并关联三个select框
2017/06/19 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
PHP实现搜索时记住状态的方法示例
2018/05/11 PHP
javascript 动态添加表格行
2006/06/22 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
2014/04/23 Javascript
如何解决vue与传统jquery插件冲突
2017/03/20 Javascript
微信小程序 wx.request方法的异步封装实例详解
2017/05/18 Javascript
underscore之Collections_动力节点Java学院整理
2017/07/10 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
Vue中使用sass实现换肤功能
2018/09/07 Javascript
vue.js父子组件通信动态绑定的实例
2018/09/28 Javascript
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
简单谈谈Python中的反转字符串问题
2016/10/24 Python
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
python+opencv轮廓检测代码解析
2018/01/05 Python
Django读取Mysql数据并显示在前端的实例
2018/05/27 Python
python中dict字典的查询键值对 遍历 排序 创建 访问 更新 删除基础操作方法
2018/09/13 Python
python 获取图片分辨率的方法
2019/01/08 Python
python使用tomorrow实现多线程的例子
2019/07/20 Python
解析Python3中的Import
2019/10/13 Python
以色列的身体护理及家居香薰品牌:Sabon NYC
2018/02/23 全球购物
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
英国标志性生活方式品牌:Skinnydip London
2019/12/15 全球购物
请解释在new与override的区别
2012/10/29 面试题
2014年图书室工作总结
2014/12/09 职场文书
英文升职感谢信
2015/01/23 职场文书
建议书格式
2015/02/04 职场文书
2015年财务人员个人工作总结
2015/07/27 职场文书
二胎满月酒致辞
2015/07/29 职场文书
股东协议书范本2016
2016/03/21 职场文书
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
2021/03/30 HTML / CSS
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL
Java 超详细讲解ThreadLocal类的使用
2022/04/07 Java/Android