由于jquery時代過去太久，現(xiàn)在手里剛好有個項(xiàng)目用到j(luò)query和bootstrap等一系列技術(shù)，接了一個需求，頁面上需要一個支持遠(yuǎn)程搜索的組件，原本以為項(xiàng)目有現(xiàn)成拿過來用的組件（碰坑），漏算了。
此項(xiàng)目里下拉框要不是固定選項(xiàng)，要不就是一次性返回的下拉數(shù)據(jù)，搜索也是在本地做的?？磥碇荒芎蚸query一起折騰了。首先，規(guī)劃了下要的組件需要滿足那些功能，然后針對性的去網(wǎng)上找了下相關(guān)的資料，突然感覺只能從零開始了.............
經(jīng)過漫長的時間，網(wǎng)上找到了一個支持遠(yuǎn)程搜索的select下拉組件，現(xiàn)有的功能滿足了一大半，用vue封裝的一些組件用久了，再來用這些，確實(shí)有些不習(xí)慣。
業(yè)務(wù)場景：
1.在表單頁面里需要個下拉框支持遠(yuǎn)程搜索（不要求分頁）
2.不需要考慮下拉選項(xiàng)數(shù)據(jù)幾個或者是固定的情況
3.禁止文本框輸入一些值生效，只能通過下拉選項(xiàng)回寫值，需要有一個按鈕一鍵清除文本框的內(nèi)容
4.為了提高些用戶體驗(yàn)，請求數(shù)據(jù)時，在文本框右側(cè)顯示loading狀態(tài)
5.不需要考慮父級別overflow：hidden 擋住元素，不需要考慮在一個頁面上多個滾動條出現(xiàn)情況下使用 的復(fù)雜問題
6.用戶搜索沒有返回數(shù)據(jù)，需要顯示無數(shù)據(jù)提示
7.用戶操作聚焦文本框，就請求數(shù)據(jù)，默認(rèn)加載20條
8.不需要多選
基于以上需求，在網(wǎng)上找的一個組件基礎(chǔ)上 優(yōu)化了以下幾點(diǎn)：
1.增加了防抖，防止請求條件和請求結(jié)果沒有對應(yīng)
2.增加了focus直接請求數(shù)據(jù)
3.處理異常和沒有數(shù)據(jù)的情況處理
4.添加緩存函數(shù) 若查詢name+url相同，直接返回緩存的數(shù)據(jù)
5.文本框顯示進(jìn)度條
6.增加清除數(shù)據(jù)按鈕
也修復(fù)了一些問題，列出如下，供參考以后免踩坑：
1.按鍵事件需要處理，點(diǎn)擊空白處判斷問題，這里我做了個判斷就是focus狀態(tài)才顯示然后請求數(shù)據(jù)
2.沒有數(shù)據(jù)的情況，彈框有顯示邊框

// 先給 元素 綁定了三個事件 blur keyup focus
 this.$element.on('blur', $.proxy(this.blur, this))
                .on('keyup', $.proxy(this.keyup, this))
                .on('focus', $.proxy(this.keyup, this));
//往元素增加 loading元素和 clear元素
      this.$element.after("<div class='clear' id='" + this.clearID.slice(1)+ "' \"><i class=\"ace-icon fa fa-remove I-pointers\"></i></div>");
            this.$element.after("<div class=\"loading\"><span></span></div>");
// 給下拉選項(xiàng)增加click事件
            this.$element.parent('.remote_duyiwuer_wrapper').on('click',this.ulID, $.proxy(this.click, this));
// 給clear按鈕綁定清除內(nèi)容方法
            this.$element.parent('.remote_duyiwuer_wrapper').on('click',this.clearID, $.proxy(this.clear, this));
// 核心內(nèi)容看 請求處理
function () {
            console.log('ajaxer')
            var that = this,
                query = that.$element.val().trim();
           if(this.ulBlur) return
            const hitData =  this.cacheData[query+that.ajax.url];
            if (hitData) {
                console.log('命中數(shù)據(jù)')
                return hitData;
            }
            that.$element.attr('data-loading',"1");
            that.uuid += 1;
            // 每個方法調(diào)用的內(nèi)部變量 fetchId
            const fetchUid = that.uuid;
            that.query = query;
            if (that.ajax.timerId) {
                clearTimeout(that.ajax.timerId);
                that.ajax.timerId = null;
            }
            that.ajax.timerId = setTimeout(function() {
                var params = { name : query };
                $.post(that.ajax.url, params, function(data){
                    console.log(data)
                    if (fetchUid !== that.uuid) {
                        console.log('被攔截的一些請求組',query)
                        return;
                    }
                    that.$element.attr('data-loading',"");
                    console.log('通過的一些請求組',query)
                    const response=that.render(data.list)
                    that.cacheData[query]=response
                    // return response
                }).error(function () {
                    that.render([])
                    that.$element.attr('data-loading',"");
                });
                that.ajax.timerId = null;
            }, that.ajax.timeout);
            return that;
        }