JQuery+AJAX实现搜索文本框的输入提示功能

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

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

 

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

 

      输入页的代码如下：

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

<style>
#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;}
</style>

 

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

<script type="text/javascript" src="/js/jquery-1.3.pack.js"></script>

<script type="text/javascript">
$(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 = "<table>";     //创建一个table
    for(var i=0;i<ss.length-1;i++){
     layer += "<tr><td class='line'>"+ss[i]+"</td></tr>";
    }
    layer += "</table>";
    $('#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();
 });
});
</script>

 

 

 

处理页的代码如下：

<?php
 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 "";
 }
?>