搜索框动态显示联想内容

一、效果展示

网页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>

</form>

<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 $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);

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

(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);