<header>

    <div class="header-container">

        <div class="header-logo fl">

        <img src="img/header-logo.png" />

        <h1><a href="#">慕多多</a></h1>

        </div>

        <div id="header-search" class="search fl">

            <form action="//ai.taobao.com/desire/index.html"class="search-form">

                <input type="text" class="search-inputbox fl" name="q" autocomplete="off" placeholder="灵魂美食一元抢" />

                <input type="submit" class="submit-btn fl" value="搜索" />

                <ul class="search-layer">

                    <!--<li class="search-layer-item text-ellipsis">111</li>

                    <li class="search-layer-item text-ellipsis">111</li>

                    <li class="search-layer-item text-ellipsis">111</li>-->

                </ul>

            </form>

        </div>

        <div class="fr"></div>

    </div>

</header>    

/*header区*/

header{

    width:100%;

    height:124px;

    font:14px "微软雅黑";

}

.header-container{

    width:1200px;

    height:100%;

    margin:0 auto;

    background:#f3f5f7;

}

.header-logo,.header-logo img {

    width:132px;

    height:42px;    

}

.header-logo{

   margin:36px 146px 0 15px;

}

.header-logo a {

   display: inline-block;

   width: 100%;

   height: 47px;

   text-indent:-9999px;

   overflow:hidden;   

 }

.search{

    width:678px;

    height:40px;

    border:1px solid #cfd2d5;

    margin-top:36px;

}

.search-inputbox{

   width:605px;

   height:40px;

   padding:0 10px;

   border:none;

   outline:none;

}

.submit-btn{

   width:73px;

   height:40px;

   border:none;

   color:white;

   background:#ca003f;

}

.search-layer{

    position:relative;

    top:0px;

    left:-1px;

    width:100%;     

    background:white;

    border:1px solid #cfd2d5;

    clear:both;

    display:none;

}

.search-layer-item {   

    height:30px;

    line-height:30px;

    padding:0 10px; 

}

.search-layer-item:hover {

    background:#f3f5f7;

}

.text-ellipsis{

    text-overflow:ellipsis;

    white-space:nowrap;

    overflow:hidden;

}

(function ($) {

    "use strict";

    function Search($elem, options) {

        this.$elem = $elem;

        this.options = options;

        this.$input = this.$elem.find(".search-inputbox"),

        this.$form = this.$elem.find(".search-form"),

        this.$layer = this.$elem.find(".search-layer");

        this.$elem.on("click", ".search-btn", $.proxy(this.submit, this));

        if (this.options.autocomplete) {

            this.autocomplete();

        }

    }

    Search.DEFAULS = {

        autocomplete:false,

        url: 'https://suggest.taobao.com/sug?code=utf-8&&_ksTS=1564047707915_833&callback=jsonp834&k=1&area=c2c&bucketid=5&q=',

        css3: false,

        js: false,

        animation:"fade"

    }

    Search.prototype.submit = function () {

        if (getInputVal() === "") {

                      return false;

        }

        this.$form.submit();

    }

    Search.prototype.autocomplete = function () {

        this.$input

            .on("input", $.proxy(this.getData, this))

            .on("focus", $.proxy(this.showLayer, this))

            .on("click", function () {

               return false;

             });

        this.$layer.showHide(this.options);   

        $(document).on("click",$.proxy(this.hideLayer, this))

    }

    Search.prototype.getData = function () {

        var self = this;

        $.ajax({

            url: this.otptions.url + this.getInputVal(),

            dataType: "jsonp"

           }).done(function (data) {          

               sele.$elem.trgger("search-getData",[data,self.$layer]);

           }).fail(function () {

               sele.$elem.trgger("search-noData");

           })

        }

    Search.prototype.showLayer = function () {

        if (this.$layer.children().length === 0) return;

        this.$layer.showHide("show")

    }

    Search.prototype.hideLayer = function () {

        this.$layer.showHide("hide")

    }

    Search.prototype.getInputVal = function () {

      return  $.trim(this.$input.val())

    }

    Search.prototype.setInputVal = function (val) {

        this.$input.val(removeHtmlTags(val));

        function removeHtmlTags(str) {

        return str.replace(/<(?:[^>'"]|"[^"]*"|'[^']*')*>/g,'');

           }

    }

    $.fn.extend({

        search: function (option,value) {

            return this.each(function () {

                var $this = $(this),

                    search = $this.data("search"),

                    options = $.extend({}, Search.DEFAULS, $this.data(), typeof option === 'object' && option);

                if (!search) {

                    $this.data('search', search = new Search($this, options));

                }

                if (typeof search[option] === "function") {

                    search[option](value);

                }

            })

        }

    })

    var $headerSearch = $("#header-search"), 

         html = "",

         maxNum = 10;

    $headerSearch.on("search-getData", function (e, data,$layer) {

        $this = $(this);

        html = creatHeaderSearchLayer(data, maxNum);

        $layer.html(html);

        if (html) {

            $this.search("showLayer");

        } else {

            $this.search("hideLayer");

        }

        $headerSearch.search({

            autocomplete: true,

            css3: false,

            js: false,

            animation: "fade"

        })

         $layer.on("click",".search-layer-item",function () {

         $input.val($(this).html());

         $form.submit();

           });

        function creatHeaderSearchLayer(data, maxNum) {

            var html = "",

                dataNum = data["result"].length;

            if (dataNum === 0) {

                return '';

            }

            for (var i = 0; i < dataNum; i++) {

                if (i >= maxNum) break;

                html += " <li class='search-layer-item text-ellipsis'>" + data["result"][i][0] + "</li>";

            }

            return html;

        }

    }). on("search-noData", function (e,$layer) {

        $(this).search("hideLayer");

        $layer.html("");

        }).on("click", ".search-layer-item", function () {

            $headerSearch.search("setInputVal",$this.html());

            $headerSearch.search("submit");

        });    

    })(jQuery)

连下拉层都没显示出来，更不知道如何按照老师下节课的方式来优化了

this.$layer.showHide("show") 另外showHide在老师视频讲的时候我找不到哪里来的