移动端类似于百度搜索自动补全功能

	 <div id="city">
		<header id="city_header_3">
			<a href="###" class="cityRe_3_btn"><img src="img/reset-return.png" alt=""></a>
			<h3>选择当前位置</h3>
		</header>

		<div class="city_search">
			<input type="text" class="search_go" id="search_text" />
			<div class="delete" style="display: none;"></div>
		</div>

		<div class="city_msg">
			<ul class="city_school">
				<!-- <li>广州体育学院</li>
				<li>广州体育学院</li>
				<li>广州体育学院</li>
				<li>广州体育学院</li>
				<li>广州体育学院</li> -->
			</ul>
		</div>
	</div>

#city {
	width: 100%;
}
#city_header_3 {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999; 	
}
#city .city_search {
	position: fixed;
	top: 0.44rem;
	left: 0;
	width: 100%;
	background-color: #c9c8ce;
	height: 0.46rem;
	padding: 0.08rem;
	z-index: 9999; 
}
#city .city_search input {
	width: 100%;
	outline: none;
	height: 0.3rem;
	border-radius: 0.04rem;
	border: none;
	font-size: 0.14rem;
	color: #333;
	background-color: #fff;
	padding-left: 0.36rem;
	background-image: url('../img/search_bg.png');	
	background-size: 0.16rem 0.16rem;
	background-position: 0.08rem center;
	background-repeat: no-repeat;

}
#city .city_search .delete {
	position: absolute;
	right: 3%;
	top: 0.08rem;
	width: 0.28rem;
	height: 0.3rem;
	background-image: url('../img/delete_bg.png');	
	background-size: 0.16rem 0.16rem;
	background-position: 0 center;
	background-repeat: no-repeat;
}
#city .city_msg {
	width: 100%;
	position: absolute;
	top:0.9rem;
	left: 0;
	padding-left: 0.14rem;
	overflow-y: hidden;
}
#city .city_msg .city_school {
	width: 100%;
}
#city .city_msg .city_school li {
	width: 100%;
	height: 0.5rem;
	line-height: 0.5rem;
	border-bottom: 0.01rem solid #f6f6f6;
	color: #333;
	font-size: 0.16rem;
}
#city .city_msg .city_school li.touch {
	background-color: #eee;
}

//点击选择学校的搜索框
	$('.search_go').on('click',function(){
		$('.delete').show();
	});

	//监听搜索框内容变化自动补全学校名称
    var jsonData=["韶关学院","广州大学","中山大学","华南理工大学","广州体育学院","北京大学","北京理工大学","北京邮电大学","广州中医药大学","广州药科大学"];
 
    $('#search_text')[0].addEventListener('input', function(event){
        var InComeDescription = event.target.value;
        //没有值直接返回,提高性能
        if (InComeDescription == null || InComeDescription.length <= 0) { return false; }

        if (jsonData.length) {
            //先把以前的记录清空，不然下拉列表会重复
            $('.city_school').empty();
            $.each(jsonData, function (index, term) {
                if(term.indexOf(InComeDescription)>-1){
                    $('<li></li>').text(term).appendTo($('.city_school'));
                }
            });
        }
       
    });

	
	//点击选择学校的搜索框里面的删除按钮
	$('.delete').on('click',function(){
		$('.search_go').val('');
		$('.city_school').empty();
		$(this).hide();
	});