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.将上面需要注意的这点的代码附上：

[code]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();
            }
        }
    }
}