Ajax-實作Google Suggest風格搜尋

1.上圖簡單模拟了下Google Suggest風格的搜尋框，主要就是采用Ajax，Html,Css,js技術，後端采用原始的Servlet。實作起來比較容易，這裡就不詳細介紹了，隻就需要注意的一點做個筆記給自己以後做個提醒。

2.最開始實作的效果需要輸入框失去焦點即onblur時才能實作下面的提示資訊，原因在于剛開始對于觸發搜尋的事件采用了onchange事件，該事件的特點就是當原素失去焦點時才被激活，是以無法達到Google Suggest那樣的體驗，我們必須即時捕獲輸入框内的内容變化才可以實作，于是嘗試了onpropertychange事件，這個事件的特點是當元素的屬性改變時，它都能實時捕獲，不過不幸的是這個事件隻在IE中有效，接下來我們必須找在其它浏覽器中可以實作此效果的事件，運氣不錯，找到了input事件，接下就要了解下input事件的使用方法：如果您是将注冊直接寫在頁面裡面，那麼如下寫法就可以實作：

<input type="text" name="textfield" oninput="alert(this.value);" onpropertychange="alert(this.value)" />

但是，将oninput寫在JS代碼中分離出來時與普通事件注冊的方法有些不同，必須使用addEventListener來注冊。

3.接下判斷浏覽器版本采用不同的方法即可，判斷浏覽器版本常用的有以下兩種方法：

－判斷浏覽器的功能屬性；

－就是判斷user-agent字段，這是最古老也是最流行的方法;

這裡我采用了最簡略的方式簡單表示下～～

if ("\v" == "v")

4.将上面需要注意的這點的代碼附上：

function immediately() {
    var element = document.getElementById("query");
    //判斷浏覽器的向簡單寫法
    if ("\v" == "v") {
        element.onpropertychange = webChange;
    } else {
        //非IE浏覽器注冊input事件
        element.addEventListener("input", webChange, false);
    }
    function webChange() {
        if (element.value) {
            //              $("#resultDiv").slideUp(500);

            var content = $.trim(this.value);
            if (content != null && content != ""
                    && content != this.defaultValue) {
                $.post("QueryServlet", {
                    'keyword' : content
                }, function(data) {
                    $("#resultDiv").empty();
                    for (var i = 0; i < data.length; i++) {
                        $("#resultDiv").append(
                                '<div>' + data[i].name + '</div>');
                    }
                    if (data == null || data.length == 0) {
                        $("#resultDiv").append('<div>沒有查詢到任何内容</div>');
                    }

                }, 'json');
                $("#resultDiv").show();
            }
        }
    }
}