input实时搜索

结构为上方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。$(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>