在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
其实大家对google suggest这种搜索关键字自动提示的功能非常的了解,但是在作为如果只做前端工作的我们,我们可以很流利的跟人家说出下面这句话: “google suggest是通过Ajax的异步交互,实时刷新页面,将关键字传给后台服务器,同时将返回结果展示在前台页面”,我们可以很流利的告诉人家,前台展示我们都知道,通过javascript的源生js代码,通过 监听onreadyStateChange事件,设置回调函数,然后用写烂了的document.getElementById('info').innerHTML=reponseText;就可以将后台返回的数据展示到前台,但是如果让我再写这篇东西之前说说, 那到底后台都做了些什么,具体的实现原理,我可能就哑口无言了!迫于对php强烈的学习的渴望,没多久我就学会了其中的原理, 大概步骤仍未几部分: 1、首先我们要知道get方式发送的请求,会在地址栏url后面缀有明显的名值对:如图: 从中我们可以看出来get发送请求的一些特征,以?隔开后面每一个名值对之间用一个&隔开,所以我们可以想象的就是如果用户这是提交的表单中有密码的东西,那么它也会显性的显示在url上面,所以就会出现安全问题,当然扯远了,不是今天要谈的主题。 2、那么类似google suggest的功能我们首先要明确整个思路 html+css:实现页面的布局和渲染,没沙克说了 jquery:1、监控键盘按键,当有内容键入的时候,就显示input框下面的div层 2、当键入的时候,触发回调函数,将input内部的value值以url的形式传送给后台php文件,进行判断处理 3、将返回的数据以li的形式,展示在div层中,同时当鼠标单击的时候,能将内容显示在input框中 4、通过 $.each()方法对返回回来的数据进行特殊的插入处理 <script type="text/javascript"> $(function(){ $("#txt1").keyup(function(e){ var $val=$(this).val(); /*var $id=0; if($("#txtHint:visible").length==1){ if(e.which==40){ $('#txtHint li').eq($id).addClass("hover").siblings().removeClass("hover"); $id++; } }*/ showHint($val); }); }) function showHint(str){ if(str.length==0){ $("#txt1").val(''); return false } var url="lyl.php"; url+="?name="+str; url+="&s>Math.random(); $.get(url,function(data){ $("#txtHint").html(""); var $array=data.split(','); $.each($array,function(index,value){ $('<li>'+value+'</li>').appendTo($("#txtHint")); $("#txtHint").show(); $('#txtHint li').click(function(){ $("#txt1").val($(this).text()); $(this).parent().hide(); }); }); }); } </script>
php+mysql:1、建立数据库链接 2、创建数据表,将准备的数组内容,以数组遍历的方式,通过mysql语句中的insert方式,插入到数据库表中,如图 $con=mysql_connect("localhost","root",""); mysql_select_db("phptest",$con); $sql="create table autucomplete( id int not null auto_increment, primary key(id), name varchar(15) )"; mysql_query($sql,$con); for($i=0;$i<count($a);$i++){//通过这个操作,将数组以遍历的方式全部插入到了数据库表中 mysql_query("insert into autucomplete (name) values ('".$a[$i]."')"); } 3、通过mysql的select方法选择出来,并通过mysql_fetch-array方法将从数据库表中取得的数据以数组的方式存储起来 $sql2="select * from autucomplete"; $result=mysql_query($sql2,$con); $a =array(); $num = 0; while($row=mysql_fetch_array($result)){ $a[$num]=$row[name]; $num++; } 4、将数据库中需要进行逻辑判断的字段,(判断数据库中是否以此为首字母开头的数据),并返回的一个response值,作为php返回给前台的数据 以上我们要注意 php和前台关联的一个重要的点就是$name=$_GET['name'];,将前台数据及时返回给后台php,然后再动态的刷新前台的内容。
其实向google和百度选择了两种方式来进行提示功能 百度 是及时监控用户的按键,没按一个键就会发送一个请求,但是当你输入了相同内容的时候将不再发送请求 google 是先检测你按键的内容,但是这些请求并没有真正地发送成功,只有当你确定了要输出的时候,才会发送成功 |
2022-08-17
2022-07-18
2022-11-06
2022-08-17
2022-07-30
请发表评论