zoukankan      html  css  js  c++  java
  • 带输入提示的搜索框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:function(data,key){
                if(!this.data[key]){
                    this.data[key]=data;
                    this.count++;            
                }
            },
            readData:function(key){
                return this.data[key];
            },
            deleteDataByKey:function(key){
                delete this.data[key];
                this.count--;
            },
            deleteDataByNum:function(num){
                var count=0;
                //对象没有length属性,只能通过for in来遍历
                for(var p in this.data){
                    if(count>=num) break;
                    this.deleteDataByKey(p);
                    this.count++;
                }
            }
    
        };
    
        function 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,this));
            //如果设置了自动完成
            if(this.options.autocomplete) this.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=",
            css3:false,
            js:false,
            animation:"fade",
            delay:200//默认200毫秒延迟
        }
    
        Search.prototype.submit=function(){
            if($.trim(this.input.val())==="") return false;
            this.form.submit();
        }
    
        Search.prototype.autocomplete=function(){
            var self=this;
            var timer=null;
    
            this.input.on("input",function(){
    
                if(self.options.delay){
                    clearTimeout(timer);
                    timer=setTimeout(function(){
                        self.getData();
                    },self.options.delay);                
                }else{
                    self.getData();
                    //delay为0时,不需要开定时器
                    //因为定时器属于异步,即使延迟为0,也会进入排队状态,无法立刻执行
                }
    
            });
    
            this.list.showHide(this.options);//向showhide组件传参,初始化
    
            //显示隐藏下拉层
            this.input.on("focus",$.proxy(this.showList,this))
                      .on("click",function(){
                          return false;//阻止点击时冒泡到document
                      });
            $(document).on("click",$.proxy(this.hideList,this));
        }
    
        Search.prototype.getData=function(){
            var self=this;
            var inputVal=this.input.val();
    
            if(!inputVal) return self.elem.trigger("search-noData");
    
            //判断是否已有缓存
            if(cache.readData(inputVal)) return self.elem.trigger("search-getData",[cache.readData(inputVal)]);
    
            if(this.jqXHR) this.jqXHR.abort();//进行ajax请求时,先终止之前的请求
            this.jqXHR=$.ajax({
                url:this.options.url+encodeURIComponent($.trim(inputVal)),
                dataType:"jsonp"
            }).done(function(data){
                //发送data数据,触发事件            
                cache.addData(data,inputVal);//添加缓存
                console.log(cache.data);
                console.log(cache.count);
                self.elem.trigger("search-getData",[data]);//数据需要用数组形式
            }).fail(function(){
                //发送失败数据,触发事件
                self.elem.trigger("search-noData");
            }).always(function(){
                //执行完毕后
                self.jqXHR=null;
            });    
        }
    
        Search.prototype.showList=function(){
            //list里有内容才显示
            if(!this.loaded) return;
            this.list.showHide("show");//使用showhide组件的show方法
        }
    
        Search.prototype.hideList=function(){
            this.list.showHide("hide");//使用showhide组件的hide方法
        }
    
        Search.prototype.setInput=function(val){
            this.input.val(val);
        }
    
        Search.prototype.appendHTML=function(html){
            this.list.html(html);
            this.loaded=!!html;//!!转布尔值,如果html有内容,转为真;否则为假
        }
    
        //插件形式
        $.fn.extend({
            search:function(opt,value){
                return this.each(function(){
                    var ui=$(this);
                    var search=ui.data("search");
                    //opt是参数对象
                    var options=$.extend({},Search.defaults,ui.data(),typeof opt==="object"&&opt);
                    
                    //单例:一个DOM元素对应一个实例,如果已经存在则不需要反复实例化
                    if(!search){
                        search=new Search(ui,options);
                        ui.data("search",search);
                    }
                    
                    //暴露出一些方法供外部调用
                    if(typeof search[opt]==="function"){
                        search[opt](value);
                    }
                });
            }
        });
    
    })(jQuery)

    接下来是html代码

        <div id="header-search" class="search fl">
            <!-- 由于没有自己的搜索页,演示时设置为提交到淘宝,参考淘宝设置 -->
            <form action="https://s.taobao.com/search" class="search-form">
                <!-- 由于input是内联块,相当于display:inline-block
                如果换行写,会造成空隙,空隙大小一般是默认字体的一半
                可以不换行书写,但是可读性较差
                都添加左浮动可以解决 -->
                <!-- 设置name才能提交 -->
                <input type="text" class="search-input fl" name="q" placeholder="灵魂美食一元抢" autocomplete="off">
                <input type="submit" value="搜索" class="search-btn fl">
            </form>
            <ul 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{
            width:586px;
            height:40px;
            line-height:40px;
            background-color:#fff;
            border:none;
            padding:0 10px;
        }
        .search-btn{
            width:73px;
            height:40px;
            background-color:#07111b;
            color:#fff;
            line-height:40px;
            text-align: center;
            cursor:pointer;
            border:none;
        }
        .search-list{
            display: none;
            background-color:#fff;
            position: absolute;
            width:606px;
            top:100%;/*父容器的高度*/
            left:-1px;
            border:1px solid #cfd2d5;
        }
        .search-item{
            height:24px;
            line-height:24px;
            padding:0 10px;
        }
        .search-item:hover{
            background-color:#f3f5f7;
            cursor: pointer;
        }

    调用搜索功能的js

        <script>
    //search
        var headerSearch=$("#header-search");
        var html="";
        var maxNum=10;//最大显示数据量
    
        headerSearch.search({
            autocomplete:true,
            css3:false,
            js:false,
            animation:"fade",
            delay:0
        });
    
        //接收事件
        headerSearch.on("search-getData",function(e,data){
            //console.log(e.type);
            console.log(data);
            
            var ui=$(this);
            //获取数据之后的处理
            html=createHeaderList(data,maxNum);
            ui.search("appendHTML",html);
    
            if(html){
                ui.search("showList");
            }else{
                ui.search("hideList");
            }
            
        }).on("search-noData",function(e){
    
            $(this).search("hideList");//隐藏下拉列表
            $(this).search("appendHTML","");//清空内容
    
        }).on("click",".search-item",function(){
    
            $(this).search("setInput",$(this).text());
            $(this).search("submit");
    
        });
    
        //创建header中搜索框的下拉列表结构
        function createHeaderList(data,maxNum){
            var html="";
            var dataNum=data["result"].length;//实际数据量
    
            if(dataNum===0) return "";
    
            for(var i=0;i<dataNum;i++){
                if(i>=maxNum) break;
                html+='<li class="search-item text-ellipsis" title="'+data["result"][i][0]+'">'+data["result"][i][0]+'</li>';
            }
            return html;
        }
        </script>

    完成

    放出完整的页面代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>search</title>
        <link rel="stylesheet" href="../css/base.css">
        <link rel="stylesheet" href="../css/search.css">
    </head>
    <body>
        <div id="header-search" class="search fl">
            <!-- 由于没有自己的搜索页,演示时设置为提交到淘宝,参考淘宝设置 -->
            <form action="https://s.taobao.com/search" class="search-form">
                <!-- 由于input是内联块,相当于display:inline-block
                如果换行写,会造成空隙,空隙大小一般是默认字体的一半
                可以不换行书写,但是可读性较差
                都添加左浮动可以解决 -->
                <!-- 设置name才能提交 -->
                <input type="text" class="search-input fl" name="q" placeholder="灵魂美食一元抢" autocomplete="off">
                <input type="submit" value="搜索" class="search-btn fl">
            </form>
            <ul 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>
        <script src="../js/jquery.js"></script>
        <script src="../js/transition.js"></script>
        <script src="../js/showhide.js"></script>
        <script src="../js/search.js"></script>
        <script>
    //search
        var headerSearch=$("#header-search");
        var html="";
        var maxNum=10;//最大显示数据量
    
        headerSearch.search({
            autocomplete:true,
            css3:false,
            js:false,
            animation:"fade",
            delay:0
        });
    
        //接收事件
        headerSearch.on("search-getData",function(e,data){
            //console.log(e.type);
            console.log(data);
            
            var ui=$(this);
            //获取数据之后的处理
            html=createHeaderList(data,maxNum);
            ui.search("appendHTML",html);
    
            if(html){
                ui.search("showList");
            }else{
                ui.search("hideList");
            }
            
        }).on("search-noData",function(e){
    
            $(this).search("hideList");//隐藏下拉列表
            $(this).search("appendHTML","");//清空内容
    
        }).on("click",".search-item",function(){
    
            $(this).search("setInput",$(this).text());
            $(this).search("submit");
    
        });
    
        //创建header中搜索框的下拉列表结构
        function createHeaderList(data,maxNum){
            var html="";
            var dataNum=data["result"].length;//实际数据量
    
            if(dataNum===0) return "";
    
            for(var i=0;i<dataNum;i++){
                if(i>=maxNum) break;
                html+='<li class="search-item text-ellipsis" title="'+data["result"][i][0]+'">'+data["result"][i][0]+'</li>';
            }
            return html;
        }
        </script>
    </body>
    </html>
  • 相关阅读:
    用colorWithPatternImage设置view背景色太占内存,替代方法
    快捷键
    数组里面放入随机数
    Android图像处理之Bitmap类
    android屏幕适配_
    最火的Android开源项目
    boost 编译
    QTextEdit更改单个段落/块的字体
    自定义QMenu样式
    Qimage QBuffer
  • 原文地址:https://www.cnblogs.com/chenyingying0/p/12363858.html
Copyright © 2011-2022 走看看