网站建设|独享带宽服务器|优惠促销机型|付款方式|联系我们
快速业务通道
技术文章 > Web编程 > PHP编程 > 正文
文件 -1 text win2 服务 域名

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

作者 佚名技术 来源 NET编程 浏览 发布时间 2012-05-23
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" />&nbsp;<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= jquery+php实现用户输入搜索内容时自动提示 - 凌众科技

网站建设|独享带宽服务器|优惠促销机型|付款方式|联系我们
快速业务通道
技术文章 > Web编程 > PHP编程 > 正文
文件 -1 text win2 服务 域名

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

作者 佚名技术 来源 NET编程 浏览 发布时间 2012-05-23
content

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!
上一页123下一页
分享到： 更多
上一篇: PHP的16进制互转下一篇: 由 php 中 if 想到的些问题
关于jquery+php实现用户输入搜索内容时自动提示的所有评论
随机推荐
相关文章
关于我们|联系我们|合作伙伴|工作机会|付款方式|网站地图

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD)：厦门软件园二期望海路63号701E（东南融通旁） 邮编(ZIP)：361008

电话：0592-5908028 传真：0592-5908039 咨询信箱：web@lingzhong.cn 咨询OICQ：173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号

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_

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!
上一页123下一页
分享到： 更多
上一篇: PHP的16进制互转下一篇: 由 php 中 if 想到的些问题
关于jquery+php实现用户输入搜索内容时自动提示的所有评论
随机推荐
相关文章
关于我们|联系我们|合作伙伴|工作机会|付款方式|网站地图

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD)：厦门软件园二期望海路63号701E（东南融通旁） 邮编(ZIP)：361008

电话：0592-5908028 传真：0592-5908039 咨询信箱：web@lingzhong.cn 咨询OICQ：173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号