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

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