带输入提示的搜索框ajax请求

先放图

 

首先要引用的文件有：

base.css  https://www.cnblogs.com/chenyingying0/p/12363689.html

jquery.js 

transition.js  https://www.cnblogs.com/chenyingying0/p/12363649.html

showhide.js  https://www.cnblogs.com/chenyingying0/p/12363707.html

search.js 

(function($){
    "use strict";

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

    };

     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.loaded=false;是否装载html
        
        绑定提交事件，事件代理
        this.elem.on("click",".search-btn",$.proxy(this.submit,1)">));
        如果设置了自动完成
        if(this.options.autocomplete) .autocomplete();
    }

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

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

    Search.prototype.autocomplete=var self=var timer=null;

        this.input.on("input",1)">(){

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

        });

        this.list.showHide(this.options);向showhide组件传参，初始化

        显示隐藏下拉层
        this.input.on("focus",1)">this.showList,1)">))
                  .on("click",1)">(){
                      阻止点击时冒泡到document
                  });
        $(document).on("click",1)">this.hideList,1)">));
    }

    Search.prototype.getData=var inputVal=.input.val();

        if(!inputVal) return self.elem.trigger("search-noData"判断是否已有缓存
        if(cache.readData(inputVal)) return self.elem.trigger("search-getData"this.jqXHR) this.jqXHR.abort();进行ajax请求时，先终止之前的请求
        this.jqXHR=$.ajax({
            url:this.options.url+encodeURIComponent($.trim(inputVal)),dataType:"jsonp"
        }).done((data){
            发送data数据，触发事件            
            cache.addData(data,inputVal);添加缓存
            console.log(cache.data);
            console.log(cache.count);
            self.elem.trigger("search-getData",[data]);数据需要用数组形式
        }).fail((){
            发送失败数据，触发事件
            self.elem.trigger("search-noData");
        }).always(执行完毕后
            self.jqXHR=;
        });    
    }

    Search.prototype.showList=list里有内容才显示
        this.loaded) returnthis.list.showHide("show");使用showhide组件的show方法
    }

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

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

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

    插件形式
    $.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元素对应一个实例，如果已经存在则不需要反复实例化
                search){
                    search=new Search(ui,options);
                    ui.data("search"暴露出一些方法供外部调用
                typeof search[opt]==="function"){
                    search[opt](value);
                }
            });
        }
    });

})(jQuery)

接下来是html代码

    <div id="header-search" class="search fl">
        <!-- 由于没有自己的搜索页，演示时设置为提交到淘宝，参考淘宝设置 -->
        form action="https://s.taobao.com/search"="search-form">
             由于input是内联块，相当于display:inline-block
            如果换行写，会造成空隙，空隙大小一般是默认字体的一半
            可以不换行书写，但是可读性较差
            都添加左浮动可以解决 -->
             设置name才能提交 input type="text"="search-input fl" name="q" placeholder="灵魂美食一元抢" autocomplete="off"="submit" value="搜索"="search-btn fl"</formul class="search-list" <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> ul>
    div>

加上点样式

    .fl{
        float:left;
    }
    .search{
        margin-top:36px;
        margin-left:144px;
        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;606px;
        top:100%;/*父容器的高度*/
        left:-1px;
    .search-item{24px;
    .search-item:hover{#f3f5f7; pointer;
    }

调用搜索功能的js

    <script>
search
    var headerSearch=$("#header-search");
    var html="";
    var maxNum=10;最大显示数据量

    headerSearch.search({
        autocomplete:true
    });

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

        $(this).search("hideList");隐藏下拉列表
        $(this).search("appendHTML","");清空内容

    }).on("click",".search-item",1)">(){

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

    });

    创建header中搜索框的下拉列表结构
     createHeaderList(data,maxNum){
        var dataNum=data["result"].length;实际数据量

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

完成

放出完整的页面代码

<!DOCTYPE html>
html lang="en"headmeta charset="UTF-8"title>searchlink rel="stylesheet" href="../css/base.css"="../css/search.css"bodyscript src="../js/jquery.js"></script="../js/transition.js"="../js/showhide.js"="../js/search.js">
//search
    var headerSearch=$("#header-search);
     html"";
     maxNum10;最大显示数据量

    headerSearch.search({
        autocomplete:truefalsefade0
    });

    接收事件
    headerSearch.on(search-getDatafunctionconsole.log(e.type);
        console.log(data);
        
         uithis);
        获取数据之后的处理
        htmlappendHTMLif(html){
            ui.search(showList);
        }else{
            ui.search(hideList);
        }
        
    }).on(search-noData(e){

        $().search();隐藏下拉列表
        $(清空内容

    }).on(click.search-item(){

        $(setInput).text());
        $(submit);

    });

    创建header中搜索框的下拉列表结构
    ;
         dataNumdata[result].length;实际数据量

        (dataNum===) return ;

        for( i;i<dataNum;i++){
            (i>=maxNum) break;
            html+='<li class="search-item text-ellipsis" title="+][i][]"></li>;
        }
        return html;
    }
    html>