1.上圖簡單摹擬了下Google Suggest風(fēng)格的搜索框，主要就是采取Ajax，Html,Css,js技術(shù)，后端采取原始的Servlet。實現(xiàn)起來比較容易，這里就不詳細(xì)介紹了，只就需要注意的1點做個筆記給自己以后做個提示。

2.最開始實現(xiàn)的效果需要輸入框失去焦點即onblur時才能實現(xiàn)下面的提示信息，緣由在于剛開始對觸發(fā)搜索的事件采取了onchange事件，該事件的特點就是當(dāng)原素失去焦點時才被激活，所以沒法到達(dá)Google Suggest那樣的體驗，我們必須即時捕獲輸入框內(nèi)的內(nèi)容變化才可以實現(xiàn)，因而嘗試了onpropertychange事件，這個事件的特點是當(dāng)元素的屬性改變時，它都能實時捕獲，不過不幸的是這個事件只在IE中有效，接下來我們必須找在其它閱讀器中可以實現(xiàn)此效果的事件，運氣不錯，找到了input事件，接下就要了解下input事件的使用方法：如果您是將注冊直接寫在頁面里面，那末以下寫法就能夠?qū)崿F(xiàn)：
<input type="text" name="textfield" oninput="alert(this.value);" onpropertychange="alert(this.value)" />

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

3.接下判斷閱讀器版本采取不同的方法便可，判斷閱讀器版本經(jīng)常使用的有以下兩種方法：
－判斷閱讀器的功能屬性；
－就是判斷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>沒有查詢到任何內(nèi)容</div>');
                    }

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