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