摘要：最近公司碰到一個需求，基于開發(fā)一個通用的帶建議的控件忙亂中寫出了一個通用結(jié)構(gòu)和方法，跟大家分享一下，同時也算做自己的踩坑總結(jié)吧。如果不解綁，會導(dǎo)致你改變其中一個的值，其它都改變因為你初始化的時候，為每一個都綁定了事件。

最近公司碰到一個需求，基于jq 開發(fā)一個通用的 帶建議 的input 控件；

忙亂中寫出了一個通用結(jié)構(gòu)和方法，跟大家分享一下，同時也算做自己的踩坑總結(jié)吧。

因為原來的表單中 已經(jīng)有固定結(jié)構(gòu)的 input 了； 所以不能改html結(jié)構(gòu)；

大概的思路就是，定義一個option 包裹層；然后點擊需要帶建議的input的時候，去根據(jù)自定義屬性 suggest-url 拿到對應(yīng)接口，取數(shù)據(jù)回來遍歷出選項。然后根據(jù) 這個input 的top，left 做絕對定位顯示出來。

//以下是固有的 form input 結(jié)構(gòu)

    單位
    
    （默認）


//隨意放一個包裹層

    

全局 有 suggest-input 類 的input 都實現(xiàn)option 功能；

function initEvent() {
    suggestInput();
})

function suggestInput() {
     //在input focus 的時候做處理。
    $(".suggest-input").focus(function () {
        //獲取相關(guān) 接口的值
        var url = $(this).attr("suggest-url");
        //緩存操作對象
        var $input = $(this);
        var $suggest = $(".suggest-option");
        var $ul = $suggest.find("ul");
        //通過input 找到 option 應(yīng)該顯示的top 和left
        var top = $input.offset().top + $input.outerHeight()+5;
        var left = $input.offset().left;
        var width = $input.outerWidth();
        
        //如下是基于 url 的ajax請求，此處暫時用靜態(tài)數(shù)據(jù)
        /*doAjaxPost(url,"",function (resp) {
            if(resp.status==1){
                var dataObj = resp.data;
                $ul.html("");
                dataObj.forEach(function (p1) {
                    $ul.append("
"+p1.title+"
");
                });
            }else {
                $ul.append("
暫無數(shù)據(jù)
")
                return;
            }
        });*/
        var dataObj = [{id:1,title:"噸"},{id:1,title:"克"},{id:1,title:"元"}];
        //先清空 ul；
        $ul.html("");
        //遍歷產(chǎn)生 option
        dataObj.forEach(function (p1) {
            $ul.append("
"+p1.title+"
");
        });
        
        //設(shè)置 option框 應(yīng)該顯示的位置
        $suggest.css({
            top:top,
            left:left,
            width:width
        }).show();
        
        //找到發(fā)生滾動事件的 包裹層，定制滾動時的處理
        $input.parents().each(function (i,o) {
            if($(o).css("overflow-y")=="auto"){
                return $(o);
            }
        }).scroll(function () {
            $suggest.css({
                top:$input.offset().top + $input.outerHeight()+5,
            })
        });
        
        //點擊消失相關(guān)操作
        $input.click(function (e) {
            e.stopPropagation();
        })
        $("body").click(function () {
            $suggest.hide();
        })
        
        //選中option 時回填數(shù)據(jù)
        $suggest.find("li").unbind("click").click(function (e) {
            $input.val($(this).text());
            $suggest.hide();
            e.stopPropagation();
        })
        
    })
}

效果如下:

整個代碼邏輯下來 其實并不難理解，但是有兩個需要注意到的地方；

$suggest.find("li").unbind("click").click(function (e) {
   
})

如果不解綁，會導(dǎo)致你改變 其中一個 input 的值，其它input都改變； 因為你初始化的時候，為每一個li 都綁定了click 事件。

$input.parents().each(function (i,o) {
    if($(o).css("overflow-y")=="auto"){
        return $(o);
    }
}).scroll(function () {
    $suggest.css({
        top:$input.offset().top + $input.outerHeight()+5,
    })
});

解決辦法就是 檢查 發(fā)生滾動的box ；發(fā)生滾動的時候，重新計算一次 option 的 top；

不過如果手動綁定 scroll 監(jiān)聽，會容易有兩個問題。一，可能發(fā)生滾動的 box 不是你監(jiān)聽的box； 二，即使你知道發(fā)生滾動的div，如果直接寫死的話，發(fā)生結(jié)構(gòu)變化時，代碼不夠通用。

因為我通過遍歷 input 的父子集，找到最近一個 overflow-y：auto 的父box；這就是發(fā)生滾動的父box。
然后綁定事件。
最后效果：