結構為上方input輸入框，下方一個select控制元件顯示匹配列表。

input對應的事件為：compositionstart compositionend input focus,
其中input在輸入內容改變時觸發。compositionstart和compositionend的作用是控制中文輸入，防止input將拼音讀進去出現bug。focus的作用是每次input聚焦時就顯示出select，失焦時隱藏select（失焦隱藏效果實際由select的change事件實現，每次在匹配列表中選擇一項時select即隱藏）

select對應的事件為：change
change事件的作用是在選擇後為unput賦值（將選中項對應的文字給input）,然後隱藏select。 $($

t h i s ) . p r e v ( " i n p u t " ) . v a l ( (this).prev("input").val( (this).find(“option:selected”).text());
系統中鳥名與鳥科鳥目相關聯，因此需要更新科與目，即根據$(‘birdSelect’)獲取對應科目id。
（點選bird，出現select，再點選空白時，select應該是隱藏的。如果在input的blur事件中將select隱藏，那麼從input離開到select進行選擇時列表就會消失，此方法不可行。解決方法應該是實時監聽滑鼠點選元素，若元素為bird或birdSelect則返回，否則將birdSelect隱藏）
html程式碼:

<tr>
	  <td width="10%" align="right">鳥名稱 ：</td>
		<td width="30%" style="position:relative">
			<!-- bird事件：compositionstart  compositionend  input  focus-->
            <!-- birdSelect事件：change blur-->
			<input type="text" id="bird" placeholder="請選擇或輸入"/>
			<select id="birdSelect" style="position:absolute;left:0;top:25px;height:auto;width:200px;display:none" size="10">
            		 <option value="-1">請選擇：</option>
            </select> 
		</td>
</tr>

js程式碼：

<script type="text/javascript">
document.getElementById('birdSelect').addEventListener("change",function(){
		//prev返回備選元素this_的前一個同級元素，且只篩選input元素。
	    $(this).prev("input").val($(this).find("option:selected").text());//使得input的值val為鳥名稱，而下拉框birdSelect的值為鳥id
	    $("#birdSelect").hide();
	    //獲取鳥名對應的科與目
		var birdId = $(this).val();
		var reg = /^\d+$/; //驗證是否為數字
		if(reg.test(birdId)){
			if(birdId != -1){
				var data = {
						'birdId' : birdId
				}
				Kelp.jsonPost("../func/web/getFamilyAndOrderByBirdId",data,function(result){
					var orderId = result.data.orderId;
					var familyId = result.data.familyId;
					$("#order").val(orderId);
					$("#family").val(familyId);
					$("#birdSelect").val(birdId);
				})
			}
		}
	})
	
	
	var inputLock = false;
	var bird = document.getElementById('bird');
	
	bird.addEventListener("compositionstart",function(){
		inputLock = true;
		console.log("start lockTrue");
	});
	
	bird.addEventListener("compositionend",function(){
		inputLock = false;
		console.log("end Lockfalse");
	});
	
	bird.addEventListener("input",function(){
		setTimeout(function(){
			console.log("input: "+ !inputLock);
			if(!inputLock){
				var birdLikeList;
				getSelectByBirdName();
			}
		},0)
	})
	function getSelectByBirdName(){
		var data = {
				'birdName' : $("#bird").val()
		}
		Kelp.jsonPost("../func/web/getBirdLikeList", data, function(result) {
			if (result.re == "1" || result.re == 1) {
				$("#birdSelect").empty();
 					$("#birdSelect").append(new Option("請選擇",-1)); 

				var birdLikeList = result.data.birdLikeList;  
				if(birdLikeList!=null && birdLikeList.length != 0){  					      
					 for(var i=0; i<birdLikeList.length; i++){  	
						 var option = document.createElement("option");
						 $(option).val(birdLikeList[i].value);
						 $(option).text(birdLikeList[i].label);
						 $('#birdSelect').append(option);
		
					}    
				}
			}
		});
	}
	
	bird.addEventListener("focus",function(){
		console.log("focus");
		 var select = $("#birdSelect");
	    //不清空原有下拉列表，只append，使得原先的最佳匹配結果依然能顯示在最前面
		    for(i=0;i<birdOptionList.length;i++){
		        var option = $("<option></option>").text(birdOptionList[i].label);
		        select.append(option);
		    } 
	    $('#birdSelect').show();
	})
	
//點選bird，出現select，再點選空白時，使得select隱藏
 $(function(){                                                                     
	    /*先將資料存入陣列*/
	    /* $("#gradSchool option").each(function(index, el) {
	        TempArr[index] = $(this).text();
	    }); */
	    //console.log(TempArr);
	    $(document).bind('click', function(e) {  
	        var e = e || window.event; //瀏覽器相容性   
	        var elem = e.target || e.srcElement;  
	        while (elem) { //迴圈判斷至跟節點，防止點選的是div子元素   
	            if (elem.id && (elem.id == 'birdSelect' || elem.id == "bird")) {  
	                return;  
	            }  
	            elem = elem.parentNode;  
	        }  
	        $('#birdSelect').hide();
	    });  
	})
</script>