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(event){
if((event.keyCode>=48 && event.keyCode<=57) || (event.keyCode>=96 && event.keyCode<=105) || (event.keyCode>=65 && event.keyCode<=90) || event.keyCode==8){
$.ajax({
type:"GET",
url:"/include/ajax_search.php",
data:"txt_search="+escape($('#search').val()),
success:function(data){
if(data != ""){
var ss;
ss = data.split("@");
var layer;
layer = "<table id='aa'>";
for(var i=0;i<ss.length-1;i++){
layer += "<tr class='line'><td class='std'>"+ss[i]+"</td></tr>";
}
layer += "</table>";
$('#searchresult').empty();
$('#searchresult').append(layer);
$('.line:first').addClass("hover");
$('#searchresult').css("display","");

$('.line').hover(function(){
$('.line').removeClass("hover");
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
});
$('.line').click(function(){
$('#search').val($(this).text());
});
}else{
$('#searchresult').empty();
$('#searchresult').css("display","none");
}
},
error:function(){alert("O No~~~");}
});
}
else if(event.keyCode == 38){
$('#aa tr.hover').prev().addClass("hover");
$('#aa tr.hover').next().removeClass("hover");
$('#search').val($('#aa tr.hover').text());
}else if(event.keyCode == 40){
$('#aa tr.hover').next().addClass("hover");
$('#aa tr.hover').prev().removeClass("hover");
$('#search').val($('#aa tr.hover').text());
}
});
});

$(document).ready(function(){
$().click(function(){
$('#searchresult').empty();
$('#searchresult').css("display","none");
});
});

處理頁的代碼如下：

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

  通過AJAX的異步傳輸處理就可以實現提示功能了！

//=================================//
下面再改進加了上下光標鍵的事件。

其他的代碼都沒有變動，就是在原先的基礎上添加了幾行。JQuery真的是很強大！

更新代碼如下：

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

$(document).ready(function(){
$('#search').keyup(function(event){
if((event.keyCode>=48 && event.keyCode<=57) || (event.keyCode>=96 && event.keyCode<=105) || (event.keyCode>=65 && event.keyCode<=90) || event.keyCode==8){
$.ajax({
   type:"GET",    data:"txt_search="+escape($('#search').val()),
   success:function(data){
   if(data != ""){
    var ss;
    ss = data.split("@");
    var layer;
    layer = "<table id='aa'>";
    for(var i=0;i<ss.length-1;i++){
     layer += "<tr class='line'><td class='std'>"+ss[i]+"</td></tr>";     layer += "</table>";
    $('#searchresult').empty();
    $('#searchresult').append(layer);
    $('.line:first').addClass("hover");
    $('#searchresult').css("display","");     $('.line').hover(function(){
     $('.line').removeClass("hover");
     $(this).addClass("hover");
    },function(){
     $(this).removeClass("hover");     $('.line').click(function(){
     $('#search').val($(this).text());    }else{
    $('#searchresult').empty();
    $('#searchresult').css("display","none");    },
   error:function(){alert("O No~~~");} }
else if(event.keyCode == 38){
$('#aa tr.hover').prev().addClass("hover");
$('#aa tr.hover').next().removeClass("hover");
$('#search').val($('#aa tr.hover').text());
}else if(event.keyCode == 40){
$('#aa tr.hover').next().addClass("hover");
$('#aa tr.hover').prev().removeClass("hover");
$('#search').val($('#aa tr.hover').text()); });
});

$(document).ready(function(){
$().click(function(){
$('#searchresult').empty();
$('#searchresult').css("display","none"); });
</script>

PS: 鍵盤監聽事件里面的event必須作為參數傳遞進去，所以要寫成$('#search').keyup(function(event){...});而在IE瀏覽器下可以留空，如$('#search').keyup(function(){...}); 因為在IE下，event屬於全局變量，是window.event，所以可以不用傳遞進去。

PS:上述代碼還有一個問題沒有解決，就是當瀏覽器窗體大小改變的時候，提示框並不會自適應的跟着改變位置，也就是說會錯位。那是因為提示框使用是絕對定位，而且一開始的時候就把Left和Top屬性給定死了，所以一旦窗體大小改變，提示框自然就不在搜索輸入框的正下方了。解決的方法是動態的獲取准確坐標，然后只要窗體大小改變就觸發這個事件來動態的重新給定Left和Top的值。增加一個更改坐標的函數如下：

function ChangeCoords(){
var left = $('#search')[0].offsetLeft;//獲取距離最左端的距離，像素，整型
var top = $('#search')[0].offsetTop+26;//獲取距離最頂端的距離，像素，整型（26為搜索輸入框的高度）
$('#searchresult').css("left",left+"px");//重新定義CSS屬性
$('#searchresult').css("top",top+"px");//同上
}

窗體的大小改變會觸發resize()事件，只需在該事件內調用ChangeCoords()方法即可。

  $(window).resize(ChangeCoords);

  另外在頂部的CSS設置中需要將Left:616px; Top:180px;先去掉。然后在鍵盤監聽事件里也加一行調用ChangeCoords()；

  因為剛加載完畢時$('#searchresult')這個DIV的CSS屬性里已經沒有Left和Top的屬性了，所以第一次彈出提示框肯定會錯位，也就是每次觸發keyup事件也需要重新定義坐標。