仓酷云

标题: PHP编程：jquery+php完成用户输出搜刮内容时主动... [打印本页]

作者: 海妖 时间: 2015-2-3 23:39
标题: PHP编程：jquery+php完成用户输出搜刮内容时主动...
掌握静态网页的制作技术是学习开发网站的先决条件，这一点就讲到这里，因为这篇文章不是教程文章，也就不对技术进行深入的刨析了。明天俄然想给本站做个搜刮页面，如许用户可以经由过程搜刮来找到本人喜好的内容，也防止了在海量信息中手动查找资本的费事，我的方针和百度首页的后果相似，当用户输出要搜刮的文字时，咱们鄙人方给出相干的十条信息，假如用户要找的就是这十条信息内的某一条，那末复杂，直接点击便可在新页面中翻开页面，次要就是想更人道化一点，让用户利用起来更便利。
　　先看一下后果图吧，如许更有动力，要否则人人还不晓得我在讲甚么，究竟要到达甚么样的后果！

　　上面先次要解说道理：
　　在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遍，我说的这个读是自己看。

作者: 简单生活 时间: 2015-2-4 05:01
个人呢觉得，配wamp 最容易漏的一步就是忘了把$PHP$目录下的libmysql.dll拷贝到windows系统目录的system32目录下，还有重启apache。

作者: 愤怒的大鸟 时间: 2015-2-6 00:19
这些都是最基本最常用功能，我们这些菜鸟在系统学习后，可以先对这些功能深入研究。

作者: 若相依 时间: 2015-2-6 19:58
其实也不算什么什么心得，在各位大侠算是小巫见大巫了吧，望大家不要见笑，若其中有错误的地方请各位大虾斧正。

作者: 透明 时间: 2015-2-14 11:53
Ps：以上纯属原创，如有雷同，纯属巧合

作者: 莫相离 时间: 2015-2-17 20:41
Apache不是非得用80或者8080端口的，我刚开始安得时候就是80端口老占用，就用了个 81端口，结果照常，就是输localhost的时候，应该输入为 localhost:81

作者: 蒙在股里 时间: 2015-3-5 22:16
最后介绍一个代码出错，但是老找不到错误方法，就是 go to wc （囧），出去换换气没准回来就找到错误啦。

作者: 分手快乐 时间: 2015-3-12 15:52
要进行开发，搭建环境是首先需要做的事，windows下面我习惯把环境那个安装在C盘下面，因为我配的环境经常出现诡异事件，什么事都没做环境有的时候就不能用啦。

作者: 谁可相欹 时间: 2015-3-19 23:35
首先我是坚决反对新手上来就用框架的，因为对底层的东西一点都不了解，造成知识上的真空，会对以后的发展不利。我的观点上手了解下框架就好，代码还是手写。当然啦如果是位别的编程语言的高手的话，这个就另当别论啦。

作者: 乐观 时间: 2015-3-28 19:10
当然这种网站的会员费就几十块钱。

作者: 灵魂腐蚀 时间: 2015-3-30 01:37
对于初学者来说不推荐去拿钱买的。当然如果一个网站你经常去用，而且里面的资料也比较有用，最好还是买个会员比较好，毕竟那些也是别人的工作成果。

作者: 精灵巫婆 时间: 2015-4-4 21:03
有时候汉字的空格也能导致页面出错，所以在写代码的时候，要输入空格最好用引文模式。

作者: 再现理想 时间: 2015-4-9 03:24
为了以后维护的方便最好是代码上都加上注释，“予人方便，自己方便”。此外开发文档什么的最好都弄齐全。我觉得这是程序员必备的素质。虽然会消耗点很多的时间。但是确实是非常有必要的。

作者: 变相怪杰 时间: 2015-4-11 17:40
不禁又想起那些说php是草根语言的人，为什么认得差距这么大呢。

作者: 若天明 时间: 2015-4-12 11:42
有时候汉字的空格也能导致页面出错，所以在写代码的时候，要输入空格最好用引文模式。

作者: admin 时间: 2015-4-24 22:57
我还是强烈建议自己搭建php环境。因为在搭建的过程中你会遇到一些问题，通过搜索或是看php手册解决问题后，你会更加深刻的理解它们的工作原理，了解到php配置文件中的一些选项设置。

作者: 小魔女 时间: 2015-5-8 03:12
说点我烦的低级错误吧，曾经有次插入mysql的时间弄了300年结果老报错，其实mysql的时间是有限制的，大概是到203X年具体的记不清啦，囧。

作者: 仓酷云 时间: 2015-5-8 08:02
其实也不算什么什么心得，在各位大侠算是小巫见大巫了吧，望大家不要见笑，若其中有错误的地方请各位大虾斧正。

作者: 爱飞 时间: 2015-5-9 06:28
建数据库表的时候，int型要输入长度的，其实是个摆设的输入几位都没影响的，只要大于4就行，囧。

作者: 小妖女 时间: 2015-6-11 03:29
最后介绍一个代码出错，但是老找不到错误方法，就是 go to wc （囧），出去换换气没准回来就找到错误啦。

欢迎光临仓酷云 (http://ckuyun.com/)