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>

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

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

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

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

　　那么服务器端如何处理客户端发送来的数据呢，下面用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>';
?>

赞 (0)

相关推荐

  • php中怎么搜索相关联数组键值及获取之

    1.搜索关联数组键如果在一个数组中找到一个指定的键,函数array_key_exists()返回TRUE,否则返回FALSE.其 形式如下:boolean array_key_exists(mixed key, array array) 下面的例子将在数组键中搜索Ohio,如果找到,将输出这个州加入美国联邦政府的育关信息:$state["Delaware"]="December 7,1787";$state["Pennsylvania"]=&qu

  • php获取从百度搜索进入网站的关键词的详细代码

    分享一个php获取从百度搜索进入网站的关键词的代码,有需要的朋友可以参考一下: 代码: 复制代码 代码如下: <?php function search_word_from() { $referer = isset($_SERVER['HTTP_REFERER'])?$_SERVER['HTTP_REFERER']:''; if(strstr( $referer, 'baidu.com')){ //百度 preg_match( "|baidu.+wo?r?d=([^\\&]*)|i

  • PHP写的获取各搜索蜘蛛爬行记录代码

    那么下面分享一款用php写的获取各搜索蜘蛛爬行记录代码 支持搜索引擎如下 可以记录Baidu,Google,Bing,Yahoo,Soso,Sogou,Yodao爬行网站的记录! php代码如下 复制代码 代码如下: <?php function get_naps_bot() { $useragent = strtolower($_SERVER['HTTP_USER_AGENT']); if (strpos($useragent, 'googlebot') !== false){ return

  • PHP在innodb引擎下快速代建全文搜索功能简明教程【基于xunsearch】

    PHP在innodb引擎下快速代建全文搜索功能简明教程【基于xunsearch】

    本文实例讲述了PHP在innodb引擎下快速代建全文搜索功能的方法.分享给大家供大家参考,具体如下: 需要准备的设备:Liunx(Centos)操作系统(只支持Linux),PHP环境. 这里介绍一个国人开发的搜索引擎开源项目-讯搜(xunsearch),它分为:索引服务器和搜索服务器. 在CentOS下面愉快的代建服务器 wget http://www.xunsearch.com/download/xunsearch-full-latest.tar.bz2 tar -xjf xunsearch

  • php 判断访客是否为搜索引擎蜘蛛的函数代码

    复制代码 代码如下: /** * 判断是否为搜索引擎蜘蛛 * * @author Eddy * @return bool */ function isCrawler() { $agent= strtolower($_SERVER['HTTP_USER_AGENT']); if (!empty($agent)) { $spiderSite= array( "TencentTraveler", "Baiduspider+", "BaiduGame",

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

    今天突然想给本站做个搜索页面,这样用户可以通过搜索来找到自己喜欢的内容,也避免了在海量信息中手动查找资源的麻烦,我的目标和百度首页的效果类似,当用户输入要搜索的文字时,我们在下方给出相关的十条信息,如果用户要找的就是这十条信息内的某一条,那么简单,直接点击就可在新页面中打开页面,主要就是想更人性化一点,让用户使用起来更方便. 先看一下效果图吧,这样更有动力,要不然大家还不知道我在讲什么,到底要达到什么样的效果! jquery+php实现搜索框自动提示 下面先主要讲解原理: 在search.htm

  • php站内搜索并高亮显示关键字的实现代码

    复制代码 代码如下: <?php require_once 'sqlTools.class.php';//封装类,可执行dql.dml语句 $info=$_POST['info']; $sql="select name,password,email from user_500 where name like '%$info%' or password like '%$info%' or email like '%$info%'"; $sqlTools=new SqlTools()

  • php启用sphinx全文搜索的实现方法

    本文实例讲述了php启用sphinx全文搜索的实现方法.分享给大家供大家参考.具体分析如下: 在编译安装 sphinx 的时候出现很多中文乱码,最后抛出错误卡住了,我去到官方直接下载一个 rpm 包,安装就很爽,具体错误不想研究了,忙开发呢. 安装两个包,一个是 mmseg 这个是生成中文字典的程序,一个是  csft 也就是中国版的sphinx . rpm -ivh 安装完以后,很顺利~~不到半分钟就装完了. 中文字典库,我直接去 csft 官方下载了,挺好的想得很周到. unigram.tx

  • php+ajax做仿百度搜索下拉自动提示框(有实例)

    php+ajax做仿百度搜索下拉自动提示框(有实例)

    php+mysql+ajax实现百度搜索下拉提示框 主要有3个文件三个文件在同一个目录里 如下图 下面是三个文件的代码 把sql文件导入到mysql数据库里 修改下数据库密码为自己的 记得哦是UTF-8编码 php+mysql+ajax实现百度搜索下拉提示框 效果图 rpc.php文件 复制代码 代码如下: <?php mysql_connect('localhost', 'root' ,''); mysql_select_db("test"); $queryString = $

  • php网站来路获取代码（针对搜索引擎）

    复制代码 代码如下: function get_referer(){ $se = 0; $url = $_SERVER["HTTP_REFERER"]; //获取完整的来路URL $str = str_replace("http://","",$url); //去掉http:// $strdomain = explode("/",$str); // 以"/"分开成数组 $domain = $strdomai

  • ThinkPHP实现ajax仿官网搜索功能实例

    本文实例讲述了ThinkPHP实现ajax仿官网搜索功能的方法.分享给大家供大家参考. 具体实现方法如下: 后台代码: 复制代码 代码如下: //搜索,如果在1不在0  function search(){      $keyword = $_POST['search'];      $Goods=M('goods');    //这里我做的一个模糊查询到名字或者对应的id,主要目的因为我这个系统是    //商城系统里面用到直接看产品ID      $map['goods_id|goods_n

  • ajax+php 谷歌搜索框自动填充功能 实例代码

    复制代码 代码如下: <html> <head> <script language="javascript"><!-- var http_request; function update(v){ if (window.XMLHttpRequest) { // Mozilla, Safari, ... http_request = new XMLHttpRequest(); } else if (window.ActiveXObject) { /

  • Thinkphp搜索时首页分页和搜索页保持条件分页的方法

    本文实例讲述了Thinkphp实现搜索时首页分页和搜索页保持条件分页的方法.分享给大家供大家参考.具体实现方法如下: 在做搜索查询时突然发现在首页用的分页代码在搜索页使用时出现错误,首页分页代码(代码中标注start与end部分为分页代码) 复制代码 代码如下: public function index(){   $res=D('Info');// 实例化Data数据对象 /**********start************/   import('ORG.Util.Page');// 导入

  • php中获取关键词及所属来源搜索引擎名称的代码

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <

随机推荐