头部布局,搜索验证和AJAX自动搜索提示,并封装成组件,提高代码复用性

index.html 头部区结构和样式

效果图

 

 静态样式

index.html中的部分

    <!-- 头部 -->
    <div class="header">
        ="container">
             h1标签是为了搜索引擎优化,表示重要
            但是页面内不要出现太多 -->
            h1 ="fl"><a href="#" class="header-logo text-hidden">慕淘网</a></h1="search fl">
                 由于没有自己的搜索页,演示时设置为提交到淘宝,参考淘宝设置 -->
                form action="https://s.taobao.com/search">
                     由于input是内联块,相当于display:inline-block
                    如果换行写,会造成空隙,空隙大小一般是默认字体的一半
                    可以不换行书写,但是可读性较差
                    都添加左浮动可以解决 -->
                     设置name才能提交 input type="text"="search-input fl" name="q" placeholder="灵魂美食一元抢" autocomplete="off"="submit" value="搜索"="search-btn fl"formul ="search-list"li ="search-item text-ellipsis" title="111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111">111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111li="222">222="333">333uldiv="header-cart fr">
    >

common.css中新增搜索框组件公共样式

/*搜索框组件 search*/
.search{
    position: relative;
    width:679px;
    border:1px solid #cfd2d5;
}
.search-input{586px;
    height:40px;
    line-height:
    background-color:#fff;none;
    padding:0 10px;
}
.search-btn{73px;#07111b;
    color:
    text-align: center;
    cursor:pointer;none;
}
.search-list{
    display: none; absolute;
    top:100%;父容器的高度*/
    left:-1px;1px solid #cfd2d5;0 10px;

}
.search-item{24px;24px;
}

index.css中新增header中独有的样式

header
.header{124px; #f3f5f7;
}
.header-logo{ block;
    background:url(../img/header-logo.png) no-repeat;136px;48px;
    margin-top:36px;
    margin-left:15px;
}
.header .search{144px;
}

引入search.js文件

这里补充下几个文本框事件的触发条件的区别:

change  文本框内容改变 + blur

keypress  按键触发,如果鼠标不抬起连续按键,则连续触发

keyup 按键释放触发,不管按什么键(包括上下箭头等无文字意义符号),而且鼠标粘贴过来的文本无法触发

input 文本输入,跟change的区别是不需要 blur 即可触发;鼠标粘贴也可触发(兼容性不好:IE8以下不支持)

综上所述,最理想的选择是 input,但有时为了兼容性,只能选择 keyup,并可以自己做一些约束改造

 

查看淘宝搜索的form表单提交action

//s.taobao.com/search

自己在表单使用时参考淘宝需要在前面加上https:协议

即:https://s.taobao.com/search

 

 

查看淘宝搜索输入框的name属性

name="q"

 

 

查看淘宝提交时ajax请求的url地址

1、打开网址,打开控制台,找到network,点击下面的JS

2、可以先用绿色框的那个按钮将下面的内容清空一下,然后在输入框中写内容,下面Name的地方就会出来信息

3、点击任意一个进去,就会出现右侧的Headers,里面的Request URL粘贴复制在浏览器地址栏中就可以看到了。

 

 

 

 

 

 

 

添加搜索验证和获取数据功能:

search.js

(function($){
    "use strict";

    //验证
    var search=$(".search"),searchInput=search.find(".search-input");

    searchBtn.on("click",(){
        submit按钮默认行为是提交表单,return false可以阻止默认行为
        $.trim() 去掉字符串两边的空格,阻止无内容提交
        if($.trim(searchInput.val())==="") return false;

    });

    自动完成
    searchInput.on("input",1)">var url = 'https://suggest.taobao.com/sug?code=utf-8&_ksTS=1484204931352_18291&callback=jsonp18292&k=1&area=c2c&bucketid=6&q='
         + encodeURIComponent($.trim(searchInput.val()));

        $.ajax({
            url:url,dataType:"jsonp",1)">jsonp用于跨域
            success:(data){
                console.log(data);
            },error:(data){
                console.log(error);
            }
        });

    });

})(jQuery)

由于jQuery.ajax返回的是jqXHR对象,它是浏览器原生XMLHttpRequest对象的一个超集,为了让回调函数名字统一,便于$.ajax中使用,jqXHR提供了.error(),.success(),.complete()

由于版本升级,才有了相应的.fail(),.done(),.always()三个方法

使用done(),fail(),always()是 为了避免代码嵌套在ajax里面,方便阅读

因此$.ajax写法可以做如下修改,异步避免回调:

         异步避免回调
        $.ajax({
            url:url,timeout:1,1)">失败常见原因是超时,这里为了演示,将超时设置为1毫秒
            dataType:"jsonp"
        }).done(function(data){成功执行
            console.log(data);
        }).fail(function(){失败执行
            console.log("fail");
        }).always(总是执行
            console.log("always");
        });

 失败有很多种原因,其中超时是一个很常见的原因

为了演示超时,设置timeout:1 (1毫秒)

 

 $.trim(searchInput.val()) 这边默认是使用的utf-8编码

如果在页面为其他编码格式,如:gbk 时,可能会因为编码问题造成读取数据失败

因此使用 encodeURIComponent( ) 来解决编码问题

1、encodeURIComponent(URIstring ) 函数可把字符串作为 URI 组件进行编码,返回值是URIstring 的副本,其中的某些字符将被十六进制的转义序列进行替换。简单来说作用就是进行编码,能够被后台识别,后台开发语言都有相应的解码 api,这样就可以成功的返回数据。

2、网页的编码会影响到发送请求时数据的编码,所以不一致时需要编码。

        var url = 'https://suggest.taobao.com/sug?code=utf-8&_ksTS=1484204931352_18291&callback=jsonp18292&k=1&area=c2c&bucketid=6&q='
         + encodeURIComponent($.trim(searchInput.val()));

生成下拉层数据结构

( encodeURIComponent($.trim(searchInput.val()));

        成功执行
            console.log(data["result"]);

            var html="";
            var dataNum=data["result"].length;实际数据量
            var maxNum=10;最大显示数据量
            if(dataNum===0) searchList.hide().html("");

            for(var i=0;i<dataNum;i++){
                if(i>=maxNum) break;
                console.log(data["result"][i][0]);
                html+='<li class="search-item text-ellipsis" title="'+data["result"][i][0]+'">'+data["result"][i][0]+'</li>';
            }
            searchList.html(html).show();

        }).fail(失败执行
            searchList.hide().html("");
        });

    });

})(jQuery)

顺便将之前index.html中这部分注释掉

                 <li class="search-item text-ellipsis" title="111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111">111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</li>
                    <li class="search-item text-ellipsis" title="222">222</li>
                    <li class="search-item text-ellipsis" title="333">333</li> >

效果

 

 

事件代理和显示隐藏下拉层

();

    searchForm.on("submit",1)">return false可以阻止默认行为,即阻止表单提交
        );
        });

    });

    jquery的事件代理
    事件绑定在父元素上,第一个参数是事件,第二个参数是被代理的子元素们,第三个参数是函数
    函数里的$(this)指向的是被代理的子元素
    searchList.on("click",".search-item",1)">(){
        searchInput.val(removeHTML($(this).html()));
        searchForm.submit();
    });

    显示隐藏下拉层
     searchInput.on("focus",function(){
         searchList.show();
     }).on("blur",1)">     searchList.hide();
     });
    以上这种方法不可行,会导致点击列表项失效
    因为blur事件与click事件冲突
    因为在选项上按下鼠标时,已经触发了input的blur事件,导致列表隐藏;再出发列表项的点击时,列表已经被隐藏
    searchInput.on("focus",1)">(){
        searchList.show();
    }).on("click",1)">false;阻止点击时冒泡到document
    });
    $(document).on("click",1)">(){
        searchList.hide();
    });


    去掉下拉列表项目的html标签,不然点击后会显示在搜索框中
     removeHTML(str){
         示例:<input type="text" value=">" name='username' />
         1、标签中的属性使用的引号 可能是双引号,也可能是单引号,所以匹配引号外面的内容使用^取反,双引号,单引号和>不能获取,其他都是可以获取的。
         2、匹配引号里面的内容,不能匹配到引号,其他都是可以的,数量上可以为0,也就是引号中间没有内容。单引号和双引号都有可能,所以写了两次。
         3、然后把这匹配的三个作为一组,需要全部都进行匹配,数量上可以为0,不需要捕获分组的内容,所以使用了?:
         4、最外层是<>
        return str.replace(/<(?:[^'">]|"[^"]*"|'[^']*')*>/g,"");
    }

})(jQuery)

知识点:

点击 input 显示下拉层,点击其他地方隐藏下拉层

这个功能,不能用下面这段代码

    searchInput.on("focus",1)">(){
        searchList.show();
    }).on("blur",1)">(){
        searchList.hide();
    });

因为这里的blur事件与click事件存在冲突
在选项上按下鼠标时,已经触发了input的blur事件,导致列表隐藏;再出发列表项的点击时,列表已经被隐藏

需要使用下面这段代码:(注意要阻止冒泡)

    显示隐藏下拉层
    searchInput.on("focus",1)">(){
        searchList.hide();
    });

去掉字符串中 html 标签的正则:

    );
    }

示例:<input type="text" value=">" name='username' />
1、标签中的属性使用的引号 可能是双引号,也可能是单引号,所以匹配引号外面的内容使用^取反,双引号,单引号和>不能获取,其他都是可以获取的。
2、匹配引号里面的内容,不能匹配到引号,其他都是可以的,数量上可以为0,也就是引号中间没有内容。单引号和双引号都有可能,所以写了两次。
3、然后把这匹配的三个作为一组,需要全部都进行匹配,数量上可以为0,不需要捕获分组的内容,所以使用了?:
4、最外层是<>

 

 面向对象方式封装搜索框功能

search.js

( Search(elem,options){
        this.elem=elem;已经是传入的jquery对象
        this.options=options;

        this.form=this.elem.find(".search-form");
        this.input=this.elem.find(".search-input"this.list=this.elem.find(".search-list");
        
        绑定提交事件,事件代理
        this.elem.on("click",".search-btn",$.proxy(this.submit,1)">));
        如果设置了自动完成
        if(this.options.autocomplete) .autocomplete();
    }

    默认参数
    Search.defaults={
        autocomplete:,url:"https://suggest.taobao.com/sug?code=utf-8&_ksTS=1484204931352_18291&callback=jsonp18292&k=1&area=c2c&bucketid=6&q="
    }

    Search.prototype.submit=if($.trim(this.input.val())==="") ;
        .form.submit();
    }

    Search.prototype.autocomplete=this.input.on("input",1)">this.getData,1)">this.list.showHide(this.options);向showhide组件传参,初始化

        显示隐藏下拉层
        this.input.on("focus",1)">this.showList,1)">))
                  .on("click",1)">(){
                                        });
        $(document).on("click",1)">this.hideList,1)">));
    }

    Search.prototype.getData=var self=;

        $.ajax({
            url:this.options.url+encodeURIComponent($.trim(.input.val())),1)">(data){
            发送data数据,触发事件
            self.elem.trigger("search-getData",[data,self.list]);数据需要用数组形式
        }).fail((){
            发送失败数据,触发事件
            self.elem.trigger("search-noData"list里有内容才显示
        this.list.children().length===0) returnthis.list.showHide("show");使用showhide组件的show方法
    }

    Search.prototype.hideList=this.list.showHide("hide");使用showhide组件的hide方法
    }

    Search.prototype.setInput=(val){
        .input.val(val);
    }

    插件形式
    $.fn.extend({
        search:(opt,value){
            this.each((){
                var ui=$();
                var search=ui.data("search"opt是参数对象
                var options=$.extend({},Search.defaults,ui.data(),1)">typeof opt==="object"&&opt);
                
                单例:一个DOM元素对应一个实例,如果已经存在则不需要反复实例化
                if(!search){
                    search=new Search(ui,options);
                    ui.data("search"暴露出一些方法供外部调用
                typeof search[opt]==="function"){
                    search[opt](value);
                }
            });
        }
    });

})(jQuery)

index.js

 不要暴露在全局,使用匿名函数自执行
(($){

    "use strict";
    
menu
    绑定事件 显示之前加载数据
    $(".dropdown").on("dropdown-show",1)">(e){

        var dataLoad=ui.data("load");

        if(!dataLoad) ;

        if(!ui.data("loaded")){

            var list=ui.find(".dropdown-list");
            ;

            setTimeout((){
                $.getJSON(dataLoad,(data){
                    var i=0;i<data.length;i++){
                        console.log(data[i]);
                        html+='<li class="menu-item"><a href="'+data[i]["url"]+'">'+data[i]["name"]+'</a></li>';
                    }
                    list.html(html);    
                    ui.data("loaded",1)">true);

                });                
            },500);
        }    
    });

    插件形式调用
    $(".dropdown").dropdown({
        css3:
    });

search
    var headerSearch=$("#header-search");
    ;
    最大显示数据量

    headerSearch.search({
        autocomplete:
    });

    接收事件
    headerSearch.on("search-getData",1)">(e,data,list){
        console.log(e.type);
        console.log(data);
        
        获取数据之后的处理
        html=createHeaderList(data,maxNum);
        list.html(html);

        if(html){
            ui.search("showList");
        }else{
            ui.search("hideList");
        }
        
    });

    headerSearch.on("search-noData",list){
        ui.search("hideList");隐藏下拉列表
        list.html("");清空内容
    });

    headerSearch.on("click",1)">(){
        headerSearch.search("setInput",$().text());
        headerSearch.search("submit");
    });

    创建header中搜索框的下拉列表结构
     createHeaderList(data,maxNum){
        实际数据量

        if(dataNum===0) return ""){
            ;
            html+='<li class="search-item text-ellipsis" title="'+data["result"][i][0]+'">'+data["result"][i][0]+'</li>';
        }
         html;
    }

})(jQuery);

 

 接下来进行代码的优化:

1、上面这句代码是对DOM的操作,比较耗费性能。优化:引入loaded变量来判断

 

2、发送ajax请求时,需要新增判断数据为空的情况

 

 

3、如果一次ajax请求还没完成,就发送了下一次ajax请求,那么会导致返回的数据无法判断是哪一次的。优化:进行下一次请求时先终止之前的请求

 

 

4、搜索框每输入一个字符,就会发送一次ajax请求,即使两次间隔很短;建议:根据用户需求,判断是否需要加入延迟

 

 优化后的search.js

(this.loaded=是否装载html
        
        默认200毫秒延迟
    }

    Search.prototype.submit=var timer=null(){

            (self.options.delay){
                clearTimeout(timer);
                timer=setTimeout((){
                    self.getData();
                },self.options.delay);                
            }{
                self.getData();
                delay为0时,不需要开定时器
                因为定时器属于异步,即使延迟为0,也会进入排队状态,无法立刻执行
            }

        });

        var inputVal=.input.val();

        if(!inputVal) return self.elem.trigger("search-noData"this.jqXHR) this.jqXHR.abort();进行ajax请求时,先终止之前的请求
        this.jqXHR=$.ajax({
            url:this.options.url+encodeURIComponent($.trim(inputVal)),[data]);执行完毕后
            self.jqXHR=;
        });    
    }

    Search.prototype.showList=this.loaded) .input.val(val);
    }

    Search.prototype.appendHTML=(html){
        .list.html(html);
        this.loaded=!!html;!!转布尔值,如果html有内容,转为真;否则为假
    }

    console.log(e.type);
        console.log(data);
        
        );
        }
        
    }).on("search-noData",1)">(e){

        $(this).search("hideList");隐藏下拉列表
        $(this).search("appendHTML","");
    }).on("click",1)">(){

        $(this).search("setInput",1)">).text());
        $(this).search("submit");

    });

     html;
    }

})(jQuery);

index.html

<!DOCTYPE html>
html lang="zh-CN"> 设置简体中文 -->
headmeta charset="UTF-8"title>indexlink rel="stylesheet" href="css/base.css"="css/index.css"="css/common.css" css一般放在DOM加载前,防止DOM裸奔 body 导航 ="nav-site"="javascript:;"="nav-site-login">亲,请登录="nav-site-reg link">免费注册="nav-site-shop link">手机逛慕淘="fr"="fl dropdown menu" data-active="menu"="dropdown-toggle link transition">我的慕淘i ="dropdown-arrow iconfont transition">&#xe642;i="dropdown-list dropdown-left">
                        ="menu-item"="#">已买到的宝贝>我的足迹>收藏夹>收藏的宝贝>收藏的店铺="fl dropdown"="nav-site-cat link">商品分类="menu" data-load="js/dropdown-seller.json">卖家中心="dropdown-loading" <li class="menu-item"><a href="#">免费开店</a></li>
                        <li class="menu-item"><a href="#">已卖出的宝贝</a></li>
                        <li class="menu-item"><a href="#">出售中的宝贝</a></li>
                        <li class="menu-item"><a href="#">卖家服务市场</a></li>
                        <li class="menu-item"><a href="#">卖家培训中心</a></li>
                        <li class="menu-item"><a href="#">体验中心</a></li> ="nav-site-service fl dropdown menu">联系客服="dropdown-list dropdown-right">

    id="header-search"="https://s.taobao.com/search"="search-form">

     <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script>
        //短路操作,如果cdn的jquery没有引用成功,则会执行后面一句,引入本地jquery
        //括号中的<\/script>标签会被当做当前标签的结束标签,因此需要转义
        window.jQuery || document.write('<script src="js/jquery.js"><\/script>');
    </script> script src="js/jquery.js"script="js/transition.js"="js/showhide.js"="js/dropdown.js"="js/search.js"="js/index.js"html>

最后,优化之数据缓存

思路:获取到的数据存入变量、cookie、或是本地存储:session storage / local storage (HTML5) 或是本地数据库

search.js

(var cache={
        data:{},count:0,1)">数据条数
        addData:(data,key){
            .data[key]){
                this.data[key]=data;
                this.count++;            
            }
        },readData:(key){
            .data[key];
        },deleteDataByKey:delete .data[key];
            this.count--;
        },deleteDataByNum:(num){
            var count=0对象没有length属性,只能通过for in来遍历
            var p in .data){
                if(count>=num) .deleteDataByKey(p);
                ;
            }
        }

    };

    判断是否已有缓存
        if(cache.readData(inputVal)) return self.elem.trigger("search-getData"发送data数据,触发事件            
            cache.addData(data,inputVal);添加缓存
            console.log(cache.data);
            console.log(cache.count);
            self.elem.trigger("search-getData",1)">){
                    search[opt](value);
                }
            });
        }
    });

})(jQuery)

 

相关文章

1.第一步 设置响应头 header(&#39;Access-Control-Allow...
$.inArray()方法介绍 $.inArray()函数用于在数组中搜索指定的...
jquery.serializejson.min.js的妙用 关于这个jquery.seriali...
JS 将form表单数据快速转化为object对象(json对象) jaymou...
jQuery插件之jquery.spinner数字智能增减插件 参考地址:http...