網頁中文本框下拉選擇輸入與自動提示功能的實現

           在網頁設計中我們經常需要用戶進行輸入操作，下面我分享兩種用戶的輸入功能。

       1.輸入框自動提示

        瀏覽網頁的時候我們經常會遇到輸入框內我們輸入前幾個字，輸入框就會出現下拉提示你可能要輸入的完整信息。如下：

            

要實現着這種功能可以使用datalist屬性就行。具體實現代碼爲：

<span style="font-size:14px;"> <input type="text" class="form-control"  aria-describedby="basic-addon1" list="category">
          <datalist id="category">  
               <option value="繩編">
               <option value="紙藝">
               <option value="木工">
          </datalist>  </span>

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

        2.文本輸入框下拉選擇輸入

        就是點擊輸入框出現下拉菜單，用戶只能從菜單中選擇輸入。

        大家都知道<selsec>標籤是可以做選擇的，那麼如何與輸入框結合起來呢?

        我的想法是剛開始就把文本輸入框和selsec選擇框並排放好，其中select選擇框的display設爲none這樣的話選擇框一開始是看不見的，當文本框聚焦後，觸發js事件使得文本框display值爲none，輸入框的display值爲block這樣用戶就可以選擇輸入了

        具體實現代碼： 

<input type="text" name="t" id="t"  onFocus="showSelect();" style=" width:180px; height:30px">   
<select name="sel" id="sel" style="display:none; width:180px;height:30px">
<option value="0">c++面向對象程序設計</option>
<option value="1">數據結構</option>
<option value="2">C語言</option>
<option value="3">JAVA語言</option>
</select>

<script type="text/javascript">
function showSelect(){
	var _t = document.getElementById('t');
	var _s = document.getElementById('sel');
	if( _t.style.display == ''){
		_t.style.display = 'none';
	}
	else{
		_t.style.display = '';
	}
   if ( _s.style.display == 'none' ){
		_s.style.display = '';
	}
	else{
		_s.style.display = 'none';
	}
}
</script>