监听input的值显示下拉菜单

用jQuery手写一波下拉菜单，虽然jQuery的hover方法提供了下拉菜单的方法，但是为了避免各式各样想不到的BUG，

决定还是手写一波。

下面介绍代码：

使用的语言：html，css，JavaScript，jQuery。

实现效果 

html 部分：

			<div style="color: #323232; ">
		查找：
				<input id="fileField_chazhao" type="text"/>
				<ul id="fileField_ul" style="display:none;z-index: 2;">
                                    <li>这里加自己想写的</li>
				</ul>
			</div>

先给ul添加display:none将ul 隐藏，内容根据需求自定义~

然后就开始监听input输入框，确认有值显示u；

JS代码如下:

				document.getElementById("fileField_chazhao").oninput=function(){
				    //oninput方法监听input的值
                            var val = $(this).val()
	        		//当val不为空的时候 将ul显示出来
                                if(val!=""){
			            $("#fileField_ul").css("display","block")
							
				}else{
					$("#fileField_ul").css("display","none")
				}
				
					
				}

这样就达到了监听input的值显示下拉菜单的效果。

当然，只控制input的值才能隐藏ul是会让我们非常不便利，所以可以给body添加一个点击事件

$("body").click(function(){
				$("#fileField_ul").css("display","none")
			})

好啦，这样就完美多了