|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
掌握静态网页的制作技术是学习开发网站的先决条件，这一点就讲到这里，因为这篇文章不是教程文章，也就不对技术进行深入的刨析了。 明天俄然想给本站做个搜刮页面，如许用户可以经由过程搜刮来找到本人喜好的内容，也防止了在海量信息中手动查找资本的费事，我的方针和百度首页的后果相似，当用户输出要搜刮的文字时，咱们鄙人方给出相干的十条信息，假如用户要找的就是这十条信息内的某一条，那末复杂，直接点击便可在新页面中翻开页面，次要就是想更人道化一点，让用户利用起来更便利。
先看一下后果图吧，如许更有动力，要否则人人还不晓得我在讲甚么，究竟要到达甚么样的后果！
上面先次要解说道理：
在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>
利用阅读器阅读页面，会看到下图的后果
看起来很通俗，没甚么款式，如今稍作款式上的调剂
#search{font-size:14px;}
#search .k{padding:2px 1px; width:320px;} /*将搜刮框宽度设置大点*/
再将显示搜刮提醒的层款式调剂一下，因为搜刮提醒层在搜刮框正下方，所以咱们设置其定位体例为相对定位
#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'); //判别办事器上前往的数据，假如等于０，则暗示没有找到相干的内容，所以将提醒框的内容清空并埋没
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 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
$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>';
?>
<P style="TEXT-INDENT: 2em">
怎么样出来了吧，怎么样自己也可以写出php程序了，虽然离职业和专业的人还有很远，但是好的开始是成功的一半。这个时候改怎么做了呢。现在就是拿1本高手推荐的书，重头到尾读1遍，我说的这个读是自己看。 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-2-3 23:39:36
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
窥视卡
雷达卡
发表于 2015-5-8 08:02:47