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

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

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

因為原來的表單中 已經有固定結構的 input 了； 所以不能改html結構；

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

//以下是固有的 form input 結構

    單位
    
    （默認）


//隨意放一個包裹層

    

全局 有 suggest-input 類 的input 都實現option 功能；

function initEvent() {
    suggestInput();
})

function suggestInput() {
     //在input focus 的時候做處理。
    $(".suggest-input").focus(function () {
        //獲取相關 接口的值
        var url = $(this).attr("suggest-url");
        //緩存操作對象
        var $input = $(this);
        var $suggest = $(".suggest-option");
        var $ul = $suggest.find("ul");
        //通過input 找到 option 應該顯示的top 和left
        var top = $input.offset().top + $input.outerHeight()+5;
        var left = $input.offset().left;
        var width = $input.outerWidth();
        
        //如下是基于 url 的ajax請求，此處暫時用靜態數據
        /*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("
暫無數據
")
                return;
            }
        });*/
        var dataObj = [{id:1,title:"噸"},{id:1,title:"克"},{id:1,title:"元"}];
        //先清空 ul；
        $ul.html("");
        //遍歷產生 option
        dataObj.forEach(function (p1) {
            $ul.append("
"+p1.title+"
");
        });
        
        //設置 option框 應該顯示的位置
        $suggest.css({
            top:top,
            left:left,
            width:width
        }).show();
        
        //找到發生滾動事件的 包裹層，定制滾動時的處理
        $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,
            })
        });
        
        //點擊消失相關操作
        $input.click(function (e) {
            e.stopPropagation();
        })
        $("body").click(function () {
            $suggest.hide();
        })
        
        //選中option 時回填數據
        $suggest.find("li").unbind("click").click(function (e) {
            $input.val($(this).text());
            $suggest.hide();
            e.stopPropagation();
        })
        
    })
}

效果如下:

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

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

如果不解綁，會導致你改變 其中一個 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,
    })
});

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

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

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