可輸入可選擇的input

因項目需要 要實現一個可選擇可輸入的下拉框，故寫了一個

html代碼

<div class="col-sm-10">
        <input type="text" id="" class="form-control" placeholder="請輸入姓名">
    </div>
    <div class="col-sm-10">
        <input type="text" id="h-input" class="form-control" placeholder="請輸入成績或選擇身高">
        <div class="selInput" id="height">
            <ul>
                <li>163cm</li>
                <li>162cm</li>
            </ul>
        </div>
    </div> 
    <div class="col-sm-10">
        <input type="text" id="w-input" class="form-control" placeholder="請輸入或選擇體重">
        <div class="selInput" id="weight">
            <ul>
                <li>50kg</li>
                <li>40kg</li>
            </ul>
        </div>
    </div> 

css代碼：

.col-sm-10{
            position: relative;
        }
        input{
            display: block;
            width: 130px;
            height: 30px;
            line-height: 30px;
        }
        .selInput{
            display: none;
            position: absolute;
            top: 30px;
            left:8px;
            width: 130px;
            line-height: 30px;
            z-index: 2;
            background: #fff;
        }
        .selInput ul{
            padding: 0;
            margin: 0;
            list-style: none;
        }

第一次嘗試的時候以為只要判斷input的點擊和ul的顯示與隱藏就行，結果發現出了問題，也把第一次的代碼貼出來好做對比

function ChoseAndInput(i,u){
        this.i = i;
        this.u = u;
    }
    ChoseAndInput.prototype = {
        canInput:function(){
          $(this.i).click(function(){
            $(this.u).show();
            $(this.i).bind('input propertychange',function(){ //給input綁定oninput onpropertychange事件 判斷input框的值是否改變 如果改變就隱藏ul
              $(this.u).hide();
            }.bind(this))
            console.log(123)
          }.bind(this))

        },
        canChose:function(){
          $(this.u).click(function(e){
            var val = $(e.target).text();
            $(this.i).val(val);
            $(this.u).hide();
          }.bind(this))
        }
    }
    var height = new ChoseAndInput('#h-input',"#height");
    height.canInput();
    height.canChose();

    var weight = new ChoseAndInput('#w-input',"#weight");
    weight.canInput();
    weight.canChose();

發現了問題：就是點擊input后ul顯示，但是此時如果不輸入也不選擇就讓input失去了焦點，發現ul就不會隱藏了，這個問題也確實解決了好久，最后發現給document綁定click事件，判斷一下點擊的元素是不是可輸入也可選擇的那個下拉框就好，最終的js代碼如下：

$(function(){
        $(document).bind('click', function(e){
            var e=e||window.event;//瀏覽器兼容性
            var elem = e.target || e.srcElement;
            var $sbling = $(elem).next(); //當前input框的下一個兄弟元素
            if($sbling && $sbling.attr('class')=='selInput'){//判斷點擊的元素是不是需要選擇或者輸入的下拉框
                $('.selInput').hide(); //下拉框都隱藏
                $sbling.show(); //只有當前input下的下拉框才顯示
                return;
            }
            $('.selInput').hide();
        })
    })
    function ChoseAndInput(i,u){
        this.i = i;
        this.u = u;
    }
    ChoseAndInput.prototype = {
        canInput:function(){
          $(this.i).click(function(){
            $(this.u).show();
            $(this.i).bind('input propertychange',function(){ //給input綁定oninput onpropertychange事件 判斷input框的值是否改變 如果改變就隱藏ul
              $(this.u).hide();
            }.bind(this))
            console.log(123)
          }.bind(this))

        },
        canChose:function(){
          $(this.u).click(function(e){
            var val = $(e.target).text();
            $(this.i).val(val);
            $(this.u).hide();
          }.bind(this))
        }
    }
    var height = new ChoseAndInput('#h-input',"#height");
    height.canInput();
    height.canChose();

    var weight = new ChoseAndInput('#w-input',"#weight");
    weight.canInput();
    weight.canChose();

最終結果就是這樣了，功能是實現了，不過應該還有改進的地方，所以寫出來讓大家幫忙看看，提一些意見^_^