搜索框动态显示联想内容

约定不等于承诺〃 2022-05-18 09:08 199阅读 0赞

## 一、效果展示 ##

![20180801163344.png][]  
网页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);

[20180801163344.png]: /images/20220518/d1d67b9ca79f493a847c24762f8911c4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，199人围观）

还没有评论，来说两句吧...

相关阅读

相关小程序的模糊联想搜索，下拉框选择

![在这里插入图片描述][20200828191907503.gif_pic_center] [github地址 https://github.com/pretty-git

偏执的太偏执、/ 2022年12月02日 00:59/ 0 赞/ 187 阅读

相关 php-联想搜索

联想搜索 1.联想功能需要数据库， 2.每字联想还要ajax传值，但是那，在这里咱们不用ajax，因为ajax的速度问题，所以我采用调用jquery. 效果展示：

墨蓝/ 2022年08月22日 13:28/ 0 赞/ 183 阅读

相关 elasticsearch 实现联想输入搜索

通常，在项目中需要联想输入（即输入关键字，提示相关词条，类似百度google的搜索）的需求，可能大家都是用的数据库的like '%关键字%‘来实现。但是这样实现有几个问题。

╰+攻爆jí腚メ/ 2022年07月12日 03:29/ 0 赞/ 280 阅读

相关 elasticsearch 实现联想输入搜索

通常，在项目中需要联想输入（即输入关键字，提示相关词条，类似百度google的搜索）的需求，可能大家都是用的数据库的like '%关键字%‘来实现。但是这样实现有几个问题。

我不是女神ヾ/ 2022年07月12日 03:29/ 0 赞/ 441 阅读

相关 angular联想搜索

转自：https://www.cnblogs.com/hjx-blog/p/6597681.html 组件组成：HTML模板 + JS文件组件原理：HTML模板就是规定组

- 日理万妓/ 2022年05月29日 03:07/ 0 赞/ 186 阅读

相关搜索框动态显示联想内容

一、效果展示 ![20180801163344.png][] 网页HTML结构 <div id="header-search" class="search

约定不等于承诺〃/ 2022年05月18日 09:08/ 0 赞/ 200 阅读

相关 TP5实现模糊条件搜索，保留搜索框内容

前端： <form> <div class="am-input-group am-input-group-sm tpl-form-border-form c

迷南。/ 2022年04月08日 09:56/ 0 赞/ 363 阅读

相关 bootstrap 联想下拉框

<div class="form-group"> <label class="control-label col

偏执的太偏执、/ 2021年10月08日 06:38/ 0 赞/ 377 阅读

相关搜索框的自动联想功能

一后端实现 1 TeacherController / 功能描述：根据关键字查询讲师名列表 @param key 搜索的关键

港控/mmm°/ 2021年07月24日 15:05/ 0 赞/ 456 阅读

相关呦西震惊--AamazeUIDatabales搜索框中关键字与搜索内容高亮显示

第一引入jquery.highlight.js文件，切记路径要正确。下面是j该js文件 / jQuery Highlight plugin Based on

你的名字/ 2021年07月04日 20:46/ 0 赞/ 433 阅读