平时使用谷歌搜索的时候发现只要在文本框里输入部分单词或字母，下面马上会弹出一个相关信息的内容框可供选择。感觉这个功能有较好的用户体验，所以也想在自己的网站上加上这种输入提示框。

实现的原理其实很简单，在输入页面利用JQuery获取用户输入，然后通过AJAX异步发送到处理页面，处理页面接收到值后进行模糊匹配查询，然后将结果返回，输入页收到返回的数据后在处理，并生成相应的页面显示在页面上。这样整个流程就结束了。如图：

输入页可以使用keyup事件接收输入的值并发送到处理页。具体代码如下：

输入页的代码如下：

//对输入提示框的CSS设置

#searchresult{width:302px; position:absolute; left:618px; top:180px;

z-index:1; overflow:hidden; background:#dcf6f8; border:#c5dadb 1px solid;

border-top:none;

}

.line{font-size:12px; color:#000; background:#aed34f; width:302px; padding:2px;}

.hover{background:#007ab8; color:#fff;}

//JQuery代码，别忘了要先引用JQuery的库文件哦。

$(document).ready(function(){

$('#search').keyup(function(){   //输入框的id为search，这里监听输入框的keyup事件

$.ajax({

type:"GET",     //AJAX提交方式为GET提交

url:"/include/ajax_search.php",   //处理页的URL地址

data:"txt_search="+escape($('#search').val()),   //要传递的参数

success:function(data){   //成功后执行的方法

if(data != ""){

var ss;

ss = data.split("@");   //分割返回的字符串

var layer;

layer = "

for(var i=0;i

layer += "

"+ss[i]+"";

}

layer += "

";

$('#searchresult').empty();  //先清空#searchresult下的所有子元素

$('#searchresult').append(layer);//将刚才创建的table插入到#searchresult内

$('.line').hover(function(){  //监听提示框的鼠标悬停事件

$(this).addClass("hover");

},function(){

$(this).removeClass("hover");

});

$('.line').click(function(){  //监听提示框的鼠标单击事件

$('#search').val($(this).text());

});

}else{

$('#searchresult').empty();

}

},

error:function(){alert("O No~~~");}

});

});

});

$(document).ready(function(){

$().click(function(){

$('#searchresult').empty();

});

});

处理页的代码如下：

require_once 'config.php';

$conn = mysql_connect($DBHost,$DBUser,$DBPwd);

mysql_select_db($DBName,$conn);

$result = $_GET["txt_search"];

if($result != ""){

$sql = "SELECT ProductName FROM Product WHERE ProductName LIKE '%{$result}%' LIMIT 10";

$query = mysql_query($sql,$conn) or die(mysql_error());

$num = mysql_num_rows($query);

if($num>0){

$str = "";

while($row = mysql_fetch_array($query)){

$str .= $row["ProductName"]."@";

}

echo $str;

}else{

echo "";

}

}else{

echo "";

}

?>