jquery+php实现用户输入搜索内容时自动提示

DevYK 发布于2019-07-01 14:12 / 1858人阅读

摘要：客户端完整代码实现用户输入搜索内容时自动提示搜索服务器端完整代码关闭原文来自

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

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

jquery+php实现用户输入搜索内容时自动提示

下面先主要讲解原理：

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

具体的实现方法：

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


 


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

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");　 //判断服务器上返回的数据，如果等于０，则表示没有找到相关的内容，所以将提示框的内容清空并隐藏
else $("#search_auto").html(data).css("display","block");　 //如果服务器上返回的数据不等于０，则将返回的内容放到提示框内并显示提示框
});
});

上面客户端已经做好了，已经可以将用户输入的内容发送到服务器端，并响应服务器的返回值。
那么服务器端如何处理客户端发送来的数据呢，下面用PHP来举个例子

";
while($ro=mysql_fetch_array($re)) echo "".$ro[title]."";　 //将查询得到的相关结果的标题输出，这个地方需要注意，由于通过jQuery的ajax技术返回的文本是UTF-8编码，所以如果$ro[title] 中包含中文，一定要记得用PHP的iconv或其它函数将其转换成UTF-8编码，否则在页面中看到的会是一串乱码
echo "关闭";　 //输入一个关闭按钮，让用户不想看到提示层时可以点击关闭，关闭按钮采用jQuery，解释一下，当前点击的按钮是$(this)，一直向上找到其第三个父元素，让它逐渐消失
echo "";
?>

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

可是还有点美中不足，那就是提示框里面的内容不美观，和我们在百度搜索中看到的提示框相比，简直是太丑了，哈哈，不急，我们再用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;} /*当鼠标移入提示框内时的效果*/
现在才算是真正的完全制作完成，至于要不要设置一个延迟处理，或是其它更完善的功能，留给朋友们自己开动脑筋了，大家也可以在下面回复你的想法，等等。

客户端完整代码：




jquery+php实现用户输入搜索内容时自动提示

服务器端完整代码：

";
while($ro=mysql_fetch_array($re)) echo "".$ro[title]."";
echo "关闭";
echo "";
?>

原文来自：http://www.rccoder.net/php/942.html

GPU云服务器云服务器 js实现搜索输入提示搜索自动提示自动搜索提示 js实现输入提示

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/31887.html

最全的Sublime text 常用插件整理

摘要：常用插件记录一些自己在使用时常用的一些插件安装插件需要先安装按调出复制代码运行一个的值转值的自动完成插件。配置参数参数配置文件转的单位比例，默认为。转的小数部分的最大长度。启用此插件的文件类型。当您重温代码时候非常有用。 Sublime text 常用插件记录一些自己在使用sublime时常用的一些插件 cssrem 、SublimeServer 、 FileHeader 、Omni...

goji 2019-08-01 17:05 评论0 收藏0
超好用的谷歌浏览器、Sublime Text、Phpstorm、油猴插件合集

摘要：分享一些超好用插件，打造一个不一样的浏览器编辑器。一谷歌浏览器插件谷歌访问助手强烈推荐一键安装，无需其他配置，即可访问谷歌。谷歌浏览器是很耗内存的，该插件会自动挂起长时间未使用的网页，来释放系统资源。 showImg(https://segmentfault.com/img/remote/1460000014011338); 分享一些超好用插件，打造一个不一样的 GitHub、浏览器、...

Rango 2019-08-22 15:45 评论0 收藏0
javascript功能插件大集合，写前端的亲们记得收藏

摘要：一个专注于浏览器端和兼容的包管理器。一个整合和的最佳思想，使开发者能快速方便地组织和编写前端代码的下一代包管理器。完全插件化的工具，能在中识别和记录模式。健壮的优雅且功能丰富的模板引擎。完整的经过充分测试和记录数据结构的库。【导读】：GitHub 上有一个 Awesome – XXX 系列的资源整理。awesome-javascript 是 sorrycc 发起维护的 JS 资源列表...

cfanr 2019-08-20 10:34 评论0 收藏0
jQuery Validate 表单验证之强大插件

摘要：返回为真，表示需要验证。注意在文件中添加只能包括中文字英文字母数字和下划线。中文名称返回类型描述验证所选的。检查是否验证通过。提交表单后，未通过验证的表单第一个或提交之前获得焦点的未通过验证的表单会获得焦点。 jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 ...

zorpan 2019-08-20 17:02 评论0 收藏0