搜索框动态显示联想内容

一、效果展示

网页HTML结构

<div id="header-search" class="search fl">
    <form action="https://s.taobao.com/search" class="search-form">
        <input type="text" name="q" placeholder="灵魂没事一元抢" autocomplete="off" class="search-inputbox fl" />
        <input type="submit" value="搜索" class="search-btn btn fl" />
    </form>
    <ul class="search-layer">
        <li class="search-layer-item text-ellipsis">下拉显示层</li>
    </ul>
</div>

二、输入获取数据并实时展示的实现

(function($) {
    'use strict';

    var $search = $('.search'),
        $form = $search.find('search-form'),
        $input = $search.find('.search-inputbox'),
        $btn = $search.find('.search-btn'),
        $layer = $search.find('.search-layer');

    //验证空数据
    $btn.on('click', function() {
        console.log(1);
        if ($.trim($input.val()) === '') { //删除字符串两边的空格 return false; //阻止提交  }
    });

    // 自动完成
    $input.on('input', function() {
        var url = 'https://suggest.taobao.com/sug?code=utf-8&_ksTS=1484204931352_18291&callback=jsonp18292&k=1&area=c2c&bucketid=6&q=' + encodeURIComponent($.trim($input.val()));
       // encodeURIComponent($.trim($input.val()))  编码，防止乱码
        $.ajax({ url: url, dataType: 'jsonp' //配置跨域 }).done(function(data) { //Ajax成功 var html = '', dataNum = data['result'].length, maxNum = 10; //控制最大显示数目 if (dataNum === 0) { $layer.hide().html(''); 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>'; } $layer.html(html).show(); }).fail(function() { //失败 $layer.hide().html(''); }).always(function() { //无论成功还是失败 console.log('why always me!'); }); });

    $layer.on('click', '.search-layer-item', function() { //事件代理，利用冒泡机制防止重复绑定事件 $input.val(removeHtmlTags($(this).html())); // $input.parents().submit(); $form.submit(); })

    //点击输入框外侧下拉消失
    $input.on('focus', function() { $layer.show(); }).on('click', function() { //阻止冒泡 return false; });
    $(document).on('click', function() { $layer.hide(); })
    //正则表达式删除网页标签
    function removeHtmlTags(str) { return str.replace(/<(?:[^>'"]|"[^"]*"|'[^']*')*>/g, ''); }; })(jQuery);

三、面向对象的思想改写代码

(function($) {
    'use strict';

     var cache = {
        data: {},
        count: 0,
        addData: function (key, data) {
            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--;
        },
        deleteDataByOrder: function (num) {
            var count = 0;

            for (var p in this.data) { if (count >= num) { break; } count++; this.deleteDataByKey(p); }
        }
    };

    function Search($elem, options) {
        this.$elem = $elem;
        this.options = options;

        this.$form = this.$elem.find('.search-form');
        this.$input = this.$elem.find('.search-inputbox');
        this.$layer = this.$elem.find('.search-layer');
        this.loaded = false;
        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',
        getDataInterval: 200

    };
    Search.prototype.submit = function() {
        if (this.getInputVal() === '') {
            return false;
        }
        this.$form.submit();
    };
    Search.prototype.autocomplete = function() {
        var timer = null,
            self = this;
        this.$input
            .on('input', function() { if (self.options.getDataInterval) { clearTimeout(timer); timer = setTimeout(function() { self.getData(); }, self.options.getDataInterval); } else { self.getData(); } })
            .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;
        var inputVal = this.getInputVal();
        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();
        this.jqXHR = $.ajax({ url: this.options.url + inputVal, dataType: 'jsonp' }).done(function(data) { console.log(data); cache.addData(inputVal, data); 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.showLayer = function() {
        if (!this.loaded) return;
        // 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, ''); } }; Search.prototype.appendLayer = function(html) { this.$layer.html(html); this.loaded = !!html; }; $.fn.extend({ search: function(option, value) { return this.each(function() { var $this = $(this), search = $this.data('search'), options = $.extend({}, Search.DEFAULTS, $(this).data(), typeof option === 'object' && option); if (!search) { $this.data('search', search = new Search($this, options)); } if (typeof search[option] === 'function') { search[option](value); } }); } }); })(jQuery);