程序员人生 网站导航

Ajax-实现Google Suggest风格搜索

栏目:htmlcss时间:2015-08-07 08:17:18

这里写图片描述


1.上图简单摹拟了下Google Suggest风格的搜索框,主要就是采取Ajax,Html,Css,js技术,后端采取原始的Servlet。实现起来比较容易,这里就不详细介绍了,只就需要注意的1点做个笔记给自己以后做个提示。


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

最新技术推荐