jquery+php实现搜索框自动提示


Posted in Javascript onNovember 28, 2014

今天突然想给本站做个搜索页面,这样用户可以通过搜索来找到自己喜欢的内容,也避免了在海量信息中手动查找资源的麻烦,我的目标和百度首页的效果类似,当用户输入要搜索的文字时,我们在下方给出相关的十条信息,如果用户要找的就是这十条信息内的某一条,那么简单,直接点击就可在新页面中打开页面,主要就是想更人性化一点,让用户使用起来更方便。

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

jquery+php实现搜索框自动提示

下面先主要讲解原理:

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

具体的实现方法:

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

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

使用浏览器浏览页面,会看到下图的效果
jquery+php实现用户输入搜索内容时自动提示
看起来很普通,没什么样式,现在稍作样式上的调整

#search{font-size:14px;}
#search .k{padding:2px 1px; width:320px;} /*将搜索框宽度设置大点*/

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

定位方式*/
接着用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,则表示没有找到相关的内容,所以将提示框的内容清空并隐藏
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 class="cls"><a href="javascript:;" onclick="$(this).parent().parent().parent().fadeOut(100)">关闭</a& gt;</li>';  //输入一个关闭按钮,让用户不想看到提示层时可以点击关闭,关闭按钮采用jQuery,解释一下,当前点击的按钮是$(this),一直向上找到其第三个父元素,让它逐渐消失
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" class="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代码:

<?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 class="cls"><a href="javascript:;" onclick="$(this).parent().parent().parent().fadeOut(100)">关闭</a& gt;</li>';
echo '</ul>';
?>

非常实用的功能吧,而且对提升用户的体验度、友好度非常棒,小伙伴们可以结合本文,自由发挥下,加入到自己的项目中去.

Javascript 相关文章推荐
JavaScript中null与undefined分析
Jul 25 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
Feb 16 Javascript
使用JS 清空File控件的路径值
Jul 08 Javascript
Javascript实现视频轮播在pc端与移动端均可
Sep 29 Javascript
JS图片切换的具体方法(带缩略图版)
Nov 12 Javascript
jQuery中hasClass()方法用法实例
Jan 06 Javascript
Bootstrap项目实战之首页内容介绍(全)
Apr 25 Javascript
Javascript vue.js表格分页,ajax异步加载数据
Oct 24 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 Javascript
微信小程序顶部可滚动导航效果
Oct 31 Javascript
原生js实现五子棋游戏
May 28 Javascript
详解ES6 中的Object.assign()的用法实例代码
Jan 11 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
Nov 28 #Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
Nov 28 #Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 #Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
Nov 28 #Javascript
开源的javascript项目Kissy介绍
Nov 28 #Javascript
对比分析json及XML
Nov 28 #Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 #Javascript
You might like
php 连接mssql数据库 初学php笔记
2010/03/01 PHP
Look And Say 序列php实现代码
2011/05/22 PHP
PHP设计模式之装饰者模式
2012/02/29 PHP
php中sql注入漏洞示例 sql注入漏洞修复
2014/01/24 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
PHP大文件分片上传的实现方法
2018/10/28 PHP
JavaScript中“+=”的应用
2007/02/02 Javascript
jquery 面包屑导航 具体实现
2013/06/05 Javascript
javascript实现限制上传文件大小
2015/02/06 Javascript
jQuery实现的淡入淡出二级菜单效果代码
2015/09/15 Javascript
微信小程序 支付功能开发错误总结
2017/02/21 Javascript
基于JQuery的购物车添加删除以及结算功能示例
2017/03/08 Javascript
基于angular2 的 http服务封装的实例代码
2017/06/29 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
2018/05/27 Javascript
angularjs获取到My97DatePicker选中的值方法
2018/10/02 Javascript
vue 导航内容设置选中状态样式的例子
2019/11/01 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
2020/07/28 Javascript
vue 图片裁剪上传组件的实现
2020/11/12 Javascript
Python代理抓取并验证使用多线程实现
2013/05/03 Python
Python中datetime模块参考手册
2017/01/13 Python
Python列表删除的三种方法代码分享
2017/10/31 Python
Python实现自动发送邮件功能
2021/03/02 Python
详解Python列表赋值复制深拷贝及5种浅拷贝
2019/05/15 Python
如何获取Python简单for循环索引
2019/11/21 Python
基于python获取本地时间并转换时间戳和日期格式
2020/10/27 Python
python实现磁盘日志清理的示例
2020/11/05 Python
python实现视频压缩功能
2020/12/18 Python
Bibloo荷兰:女士、男士和儿童的服装、鞋子和配饰
2019/02/25 全球购物
后勤副校长自我鉴定
2013/10/13 职场文书
年终奖发放方案
2014/06/02 职场文书
担保书范本
2015/01/20 职场文书
个人委托书范文
2015/01/28 职场文书
2015年教务处干事工作总结
2015/07/22 职场文书
微信早安问候语
2015/11/10 职场文书
初中历史教学反思
2016/02/19 职场文书
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs