网页中文本框下拉选择输入与自动提示功能的实现

在网页设计中我们经常需要用户进行输入操作，下面我分享两种用户的输入功能。

       1.输入框自动提示

        浏览网页的时候我们经常会遇到输入框内我们输入前几个字，输入框就会出现下拉提示你可能要输入的完整信息。如下：

            

要实现着这种功能可以使用datalist属性就行。具体实现代码为：

[html]  view plain  copy

1. <span style="font-size:14px;"> <input type="text" class="form-control"  aria-describedby="basic-addon1" list="category">  
2.           <datalist id="category">    
3.                <option value="绳编">  
4.                <option value="纸艺">  
5.                <option value="木工">  
6.           </datalist>  </span>  

只要input中list属性等于datalist的id多久可以了，option中就是就是完整信息。

        2.文本输入框下拉选择输入

        就是点击输入框出现下拉菜单，用户只能从菜单中选择输入。

        大家都知道<selsec>标签是可以做选择的，那么如何与输入框结合起来呢?

        我的想法是刚开始就把文本输入框和selsec选择框并排放好，其中select选择框的display设为none这样的话选择框一开始是看不见的，当文本框聚焦后，触发js事件使得文本框display值为none，输入框的display值为block这样用户就可以选择输入了

        具体实现代码： 

[html]  view plain  copy

1. <input type="text" name="t" id="t"  onFocus="showSelect();" style=" width:180px; height:30px">     
2. <select name="sel" id="sel" style="display:none; width:180px;height:30px">  
3. <option value="0">c++面向对象程序设计</option>  
4. <option value="1">数据结构</option>  
5. <option value="2">C语言</option>  
6. <option value="3">JAVA语言</option>  
7. </select>  

[javascript]  view plain  copy

1. <script type="text/javascript">  
2. function showSelect(){  
3.     var _t = document.getElementById('t');  
4.     var _s = document.getElementById('sel');  
5.     if( _t.style.display == ''){  
6.         _t.style.display = 'none';  
7.     }  
8.     else{  
9.         _t.style.display = '';  
10.     }  
11.    if ( _s.style.display == 'none' ){  
12.         _s.style.display = '';  
13.     }  
14.     else{  
15.         _s.style.display = 'none';  
16.     }  
17. }  
18. </script>