<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();
});