其实大家对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 是先检测你按键的内容，但是这些请求并没有真正地发送成功，只有当你确定了要输出的时候，才会发送成功