承接微信小程序开发。扫码加微信。示例图：展示所有城市的数据，可实现模糊搜索。
先上代码
viewviewbindtap="goBack"imagesrc="/img/icon/closeIcon.png"/image/viewviewviewviewicontype="search"size="16"/iconinputtype="text"placeholder="搜索"value="{{inputVal}}"focus="{{inputShowed}}"bindconfirm='searchHandle'confirm-type="search"bindinput="searchInputCon"/viewwx:if="{{inputVal.length0}}"bindtap="clearInput"icontype="clear"size="16"/icon/view/viewlabelhidden="{{inputShowed}}"bindtap="showInput"iconstyle='margin-top:6rpx'type="search"size="16"/iconview搜索/view/label/viewviewhidden="{{!inputShowed}}"bindtap="hideInput"取消/view/viewviewbindtap="myCity"wx:if="{{currentCity}}"当前定位城市：text{{currentCity}}/text/viewviewwx:elif="{{locationLodding&&!currentCity}}"buttonview当前定位城市：定位中/viewimagesrc="/img/icon/loading_unicom.gif"/image/button/viewviewwx:elif="{{ldata==false&&!currentCity&&!locationLodding}}"view当前定位城市：/viewbuttonopen-type="openSetting"catchopensetting="locationhandler"view获取当前地理位置/viewimagesrc="/img/icon/reload.png"/image/button/viewviewwx:else="{{!currentCity&&locationLodding==false&&ldata==false}}"当前定位城市：text/text/viewviewwx:if="{{!searchResult}}"viewwx:if="{{BrowsingHistory}}"view最近访问/viewviewviewwx:for="{{BrowsingHistory}}"data-city="{{item.CityName}}"data-id="{{item.CityId}}"wx:key="item.CityId"bindtap="getCity"{{item.CityName}}/view/view/viewviewwx:for="{{cityList}}"wx:key="{{item.initial}}"view{{item.initial}}/viewviewviewwx:for="{{item.cityInfo}}"wx:for-item="ct"wx:key="{{ct.id}}"data-city="{{ct.city}}"data-id="{{ct.id}}"bindtap="getCity"{{ct.city}}/view/view/view/viewviewwx:if="{{searchResult}}"viewview搜索结果/viewviewviewwx:for="{{searchResult}}"wx:for-item="ct"wx:key="{{ct.id}}"data-city="{{ct.city}}"data-id="{{ct.id}}"bindtap="getCity"{{ct.city}}/view/view/view/view/viewjs
constapp=getApp();varcity=require('../../utils/city.js');varcommon=require('../templates/common.js');Page({data:{searchshow:true,inputShowed:false,inputVal:"",locationLodding:false},onLoad:function(options){common.init.apply(this,[]);//公共组件//从修改地区过来if(options.editAccount){this.setData({editAccount:options.editAccount})}if(!wx.getStorageSync('cityPosition')){this.getLocation();}else{this.setData(wx.getStorageSync('cityPosition'))}//this.getLocation();//获取当前位置信息varcityList=city.cityList();//城市列表this.setData({cityList:cityList})},//选择城市getCity:function(e){vargetCityName=e.currentTarget.dataset.city;vargetCityId=e.currentTarget.dataset.id;varcurrentCity={CityName:getCityName,CityId:getCityId}varBrowsingHistory=wx.getStorageSync('BrowsingHistory');//当没有浏览历史记录if(!BrowsingHistory){BrowsingHistory=[];BrowsingHistory.push(currentCity);}else{varcheckRepeat=BrowsingHistory.find(item={returnitem.CityId==getCityId;})//当不重复时插入地区if(!checkRepeat){BrowsingHistory.unshift(currentCity);}//当重复时，先删除再插入if(checkRepeat){BrowsingHistory=BrowsingHistory.filter((item)={returnitem.CityId!=getCityId})//console.log('BrowsingHistory',BrowsingHistory)BrowsingHistory.unshift(currentCity);}}//当长度等于9删除最后一个if(BrowsingHistory&&BrowsingHistory.length==9){BrowsingHistory.pop(1);}wx.setStorageSync('currentCity',currentCity);//设置一天过期时间vartimestamp=Date.parse(newDate());varcurrentCity_expiration=timestamp+6060241000;//varsession_expiration=timestamp+31000;//测试10s过期wx.setStorageSync("currentCity_expiration",currentCity_expiration);wx.setStorageSync('BrowsingHistory',BrowsingHistory);if(this.data.editAccount){letpages=getCurrentPages();//当前页面letprevPage=pages[pages.length-2];//上一页面prevPage.setData({//直接给上移页面赋值editAccount:this.data.editAccount});this.goBack();}else{this.goBack();}},//当前定位城市myCity:function(){currentCity=this.data.currentCity;varcurrentCity={CityName:currentCity,CityId:this.data.CityId}wx.setStorageSync('currentCity',currentCity);//设置一天过期时间vartimestamp=Date.parse(newDate());varcurrentCity_expiration=timestamp+6060241000;wx.setStorageSync("currentCity_expiration",currentCity_expiration);this.goBack();},searchInputShow:function(){this.setData({searchshow:false,searchContext:''})},searchInputHidden:function(){this.setData({searchshow:true,searchContext:''})},goBack:function(){wx.navigateBack({delta:1})},onShow:function(){varBrowsingHistory=wx.getStorageSync('BrowsingHistory');this.setData({BrowsingHistory:BrowsingHistory})},//搜索及搜索结果searchHandle:function(e){varsearchContext=this.data.searchContext;varcityList=this.data.cityList;varsearchArr=[];cityList.forEach(item={varcitylist=item.cityInfo;citylist.forEach(value={if(value.city.indexOf(searchContext)=0){searchArr.push(value);}})})if(searchArr){this.setData({searchResult:searchArr})}},//文本输入事件searchInputCon:function(e){letkeywords=e.detail.value;this.setData({searchContext:keywords})},showInput:function(){this.setData({inputShowed:true});},hideInput:function(){this.setData({inputVal:"",inputShowed:false});},clearInput:function(){this.setData({inputVal:""});}});css
.closeLocation{height:85rpx;position:relative;}.closeLocationimage{width:22rpx;height:22rpx;position:absolute;right:30rpx;top:30rpx;}.search{height:90rpx;background:#fff;width:100%;position:relative;}.search.searchLeftText{width:85rpx;height:90rpx;position:relative;left:0;top:0;position:absolute;display:flex;}.search.searchLeftTextimage{width:35rpx;height:34rpx;margin-left:35rpx;margin-top:30rpx;}.search.undo{width:100rpx;line-height:90rpx;position:absolute;right:0;top:0;color:#55b837;font-size:32rpx;}.search.search_input{height:90rpx;line-height:90rpx;width:80%;box-sizing:border-box;padding-left:85rpx;padding-right:110rpx;background:none}.searchTextP{width:100%;height:90rpx;}.search.searchText{position:absolute;width:100%;height:90rpx;line-height:90rpx;display:flex;justify-content:center;align-items:center;font-size:32rpx;color:#999;flex-direction:row;top:0;left:0;pointer-events:none;}.search.searchTextimage{width:35rpx;height:34rpx;margin-right:15rpx;}.currentArea{font-size:32rpx;color:#999;height:90rpx;line-height:90rpx;background:#fff;box-sizing:border-box;padding:030rpx;margin-top:40rpx;}.currentAreatext{color:#55b837;}.allCity{height:auto;font-size:28rpx;color:#000;}.allCity.provice{height:auto;}.allCity.provice.recently{height:90rpx;line-height:90rpx;color:#999999;padding-left:30rpx;}.allCity.provice.cityList{display:flex;flex-direction:row;flex-wrap:wrap;}.allCity.provice.cityListview{background:#fff;height:88rpx;border-right:1pxsolid#f4f4f4;border-bottom:1pxsolid#f4f4f4;width:25%;overflow:hidden;box-sizing:border-box;text-align:center;line-height:88rpx;}.reload{display:flex;}.reloadbutton{display:flex;padding:0;margin:0;background:none;justify-content:center;align-items:center;height:90rpx;color:#999}.reloadbuttonimage{width:30rpx;height:30rpx;margin-left:15rpx;}.loaddingbuttonimage{width:25rpx;height:25rpx;}/搜索样式/.weui-search-bar{background:#fff}.weui-search-bar__form{border:none}.weui-search-bar{border:none}.weui-search-bar__input{font-size:30rpx;}.weui-search-bar__text{font-size:30rpx}引用的../../utils/city.js
文件下载：
