可输入可选择的input

因项目需要 要实现一个可选择可输入的下拉框，故写了一个

html代码

 1 <div class="col-sm-10">
 2         <input type="text" id="" class="form-control" placeholder="请输入姓名">
 3     </div>
 4     <div class="col-sm-10">
 5         <input type="text" id="h-input" class="form-control" placeholder="请输入成绩或选择身高">
 6         <div class="selInput" id="height">
 7             <ul>
 8                 <li>163cm</li>
 9                 <li>162cm</li>
10             </ul>
11         </div>
12     </div>
13     <div class="col-sm-10">
14         <input type="text" id="w-input" class="form-control" placeholder="请输入或选择体重">
15         <div class="selInput" id="weight">
16             <ul>
17                 <li>50kg</li>
18                 <li>40kg</li>
19             </ul>
20         </div>
21     </div> 

css代码：

 1 .col-sm-10{
 2             position: relative;
 3         }
 4         input{
 5             display: block;
 6             width: 130px;
 7             height: 30px;
 8             line-height: 30px;
 9         }
10         .selInput{
11             display: none;
12             position: absolute;
13             top: 30px;
14             left:8px;
15             width: 130px;
16             line-height: 30px;
17             z-index: 2;
18             background: #fff;
19         }
20         .selInput ul{
21             padding: 0;
22             margin: 0;
23             list-style: none;
24         }

第一次尝试的时候以为只要判断input的点击和ul的显示与隐藏就行，结果发现出了问题，也把第一次的代码贴出来好做对比

 1 function ChoseAndInput(i,u){
 2         this.i = i;
 3         this.u = u;
 4     }
 5     ChoseAndInput.prototype = {
 6         canInput:function(){
 7           $(this.i).click(function(){
 8             $(this.u).show();
 9             $(this.i).bind(‘input propertychange‘,function(){ //给input绑定oninput onpropertychange事件 判断input框的值是否改变 如果改变就隐藏ul
10               $(this.u).hide();
11             }.bind(this))
12             console.log(123)
13           }.bind(this))
14
15         },
16         canChose:function(){
17           $(this.u).click(function(e){
18             var val = $(e.target).text();
19             $(this.i).val(val);
20             $(this.u).hide();
21           }.bind(this))
22         }
23     }
24     var height = new ChoseAndInput(‘#h-input‘,"#height");
25     height.canInput();
26     height.canChose();
27
28     var weight = new ChoseAndInput(‘#w-input‘,"#weight");
29     weight.canInput();
30     weight.canChose();

发现了问题：就是点击input后ul显示，但是此时如果不输入也不选择就让input失去了焦点，发现ul就不会隐藏了，这个问题也确实解决了好久，最后发现给document绑定click事件，判断一下点击的元素是不是可输入也可选择的那个下拉框就好，最终的js代码如下：

 1 $(function(){
 2         $(document).bind(‘click‘, function(e){
 3             var e=e||window.event;//浏览器兼容性
 4             var elem = e.target || e.srcElement;
 5             var $sbling = $(elem).next(); //当前input框的下一个兄弟元素
 6             if($sbling && $sbling.attr(‘class‘)==‘selInput‘){//判断点击的元素是不是需要选择或者输入的下拉框
 7                 $(‘.selInput‘).hide(); //下拉框都隐藏
 8                 $sbling.show(); //只有当前input下的下拉框才显示
 9                 return;
10             }
11             $(‘.selInput‘).hide();
12         })
13     })
14     function ChoseAndInput(i,u){
15         this.i = i;
16         this.u = u;
17     }
18     ChoseAndInput.prototype = {
19         canInput:function(){
20           $(this.i).click(function(){
21             $(this.u).show();
22             $(this.i).bind(‘input propertychange‘,function(){ //给input绑定oninput onpropertychange事件 判断input框的值是否改变 如果改变就隐藏ul
23               $(this.u).hide();
24             }.bind(this))
25             console.log(123)
26           }.bind(this))
27
28         },
29         canChose:function(){
30           $(this.u).click(function(e){
31             var val = $(e.target).text();
32             $(this.i).val(val);
33             $(this.u).hide();
34           }.bind(this))
35         }
36     }
37     var height = new ChoseAndInput(‘#h-input‘,"#height");
38     height.canInput();
39     height.canChose();
40
41     var weight = new ChoseAndInput(‘#w-input‘,"#weight");
42     weight.canInput();
43     weight.canChose();

最终结果就是这样了，功能是实现了，不过应该还有改进的地方，所以写出来让大家帮忙看看，提一些意见^_^