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

1、jquery+php实现用户输入搜索内容时自动提示时间:2011-01-13 16:35来源:PHP100中文网 作者:PHPIOOer点击：食2648次【字号：大 中小】 今天突然想给本站做个搜索页面，这样用户可以通过搜索来找到自己喜欢的内容，也避免了在海量信息中 手动查找资源的麻烦，我的目标和百度首页的效果类似，当用户输入要搜索的文字时，我们在下方给出相 关的十条信息，如果用户要找的就是这十条信息内的某一条，今天突然想给本站做个搜索页面，这样用户可以通过搜索来找到自己喜 欢的内容，也避免了在海量信息中手动查找资源的麻烦，我的目标和百度首页的效果类似， 当用户输入要搜索的文字时，我们在下方给

2、出相关的十条信息，如果用户要找的就是这十条 信息内的某一条，那么简单，直接点击就可在新页面中打开页面，主要就是想更人性化一点, 让用户使用起来更方便。先看一下效果图吧，这样更有动力，要不然大家还不知道我在讲什么，到底要达到什么 样的效果！J搜索j Query通过nomm菽取对象H Query水平垂亘居中层打W替换英文单弓1号打汨历J jquery实现ajox传输j que湍!作类似Access的可褊辑表格jquery lodd方法IE与Fi您刊衣在JavoScr i pt上的不同点J query ajdxStartoJaxStop关闭丨腿回顶雀下面先主要讲解原理：在search.html页面中

3、，用户在搜索框内输入“j”使用javascript获取搜索框的文本 内容，到数据库中查找相关的内容并返回，再使用javascript将服务器返回的结果显示在搜 索框下面的提示框内，供用户参考选择。具体的实现方法：首先在页面中做好搜索框、搜索按钮、显示搜索提示的层，如下代码div id二search使用浏览器浏览页面，会看到下图的效果看起来很普通，没什么样式，现在稍作样式上的调整#searchfont-size:14px;#search .kpadding:2px 1px; wid th:320px; /* 将搜索框宽度设置大点*/ 再将显示搜索提示的层样式调整一下，由于搜索提示层在搜索框正下方

4、，所以我们设置其定位方式为绝对定位#search_autoborder:1px solid #817FB2; positio n: absolute; /* 设置边框、定位方式 */接着用JS将搜索提示层的位置放置在搜索框正下方，且宽度和搜索框相同，这里我们采用jQuery来解决$(#search_auto).css(width:$(#search in put name=k).width()+4);搜索提示层的位置和宽度已经确定好了，由于在用户没有输入搜索文字前这个提示框是 不显示的，所以我们先要将它设置成隐藏，在提示层的样式里加上display:none将其隐藏。已经全部0K 了，现在只要

5、给搜索框的onkeyup注册事件即可，我们依然采用jQuery来处理，在jQuery中是keyup$(#search inp ut name二k).keyup(func tio n()$.pos t( search_a uto .php,value:$( this).val(),func tio n(da ta)/向服务器上的search_auto.php发送post数据，$.post是jQuery的方法if(data二二0) $(#search_auto ).html().css(display,none);/判断服务器上返回的数据，如果等于0,则表示没有找到相关的内容，所以将提 示框的内容

6、清空并隐藏else $(#search_auto ).html(data).css(display,block);/如果服务器上返回的数据不等于0,则将返回的内容放到提示框内并显示提示框 ););上面客户端已经做好了，已经可以将用户输入的内容发送到服务器端，并响应服务器的 返回值。那么服务器端如何处理客户端发送来的数据呢，下面用PHP来举个例子?php$v=$_POSTvalue;$re=mysql_query(select * from test where title like %$v% order by add time desc lim it 10);/根据客户端发送来的数据，到数据库

7、中查询10条相关的结果if(mysql_num_rows($re)=0) exit(0);/判断查询结果，如果没有相关的结果，那么直接返回0echo ;while($ro=mysql_fetch_array($re) echo .$ro tit le.;/将查询得到的相关结果的标题输出，这个地方需要注意，由于通过jQuery的ajax技术返回的文本是UTF-8编码，所 以如果$rotitle中包含中文，一定要记得用PHP的iconv或其它函数将其转 换成UTF-8编码，否则在页面中看到的会是一串乱码 echo 关闭/a& gt ;/输入一个关闭按钮，让用户不想看到提示层时可以点击关闭，关闭按钮

8、采用jQuery，解释一下，当前点击的按钮是$(this)，一直向上找到其 第三个父元素，让它逐渐消失echo ;?现在服务器已经可以正确的执行我们发送过去的数据了，并且返回相应的结果，那么现 在在搜索框内输入一个文字测试一下吧，但前提是你的数据库中得有与这个文字相关的内容 啊，要不然你也看不到提示框的出现，因为没有相关提示内容啊，呵呵。可是还有点美中不足，那就是提示框里面的内容不美观，和我们在百度搜索中看到的提 示框相比，简直是太丑了，哈哈，不急，我们再用css来调整显示的效果#search_auto libackground:#FFF; textalign:left; /*设置提示框内的

9、li 标签效果*/#search_auto li.clstextalign:right; /*设置提示框内的关闭按钮效果*/ #search_auto li adisplay:block; padding:5px 6px; cursor:pointer; color:#666; /*设置提示框内li标签下的a标签效果*/#search_auto li a:hoverbackground:#D8D8D8; text-decoration:none; color:#000; /*当鼠标移入提示框内时的效果*/现在才算是真正的完全制作完成，至于要不要设置一个延迟处理，或是其它更完善的功 能，留给朋友

10、们自己开动脑筋了，大家也可以在下面回复你的想法，等等。客户端完整代码：#searchfont-size:14px;#search .kpadding:2px 1px; width:320px;#search_autoborder:lpx solid #817FB2; position:absolute; display:none; #search_auto libackground:#FFF; text-align:left;#search_auto li.clstext-align:right;#search_auto li adisplay:block; padding:5px 6px;

11、cursor:pointer; color:#666;#search_auto li a:hoverbackground:#D8D8D8; text-decoration:none; color:#000;jquery+php实现用户输入搜索内容时自动提示/titlediv id二search$(func tio n()$(#search_auto ).css(width:$(#searchinp ut name二k).wid th()+4);$(#search inp ut name二k).keyup(func tio n()$.pos t( search_a uto .php,value:$( this).val(),func tio n(da ta) if(data二二0) $(#search_auto ).html().css(display,none); else $(#search_auto ).html(data).css(display,block););););服务器端完整代码：?php $v=$_POSTvalue;$re=mysql_query(sele