小程序怎么才能制作_原生js完成html手机端城市列

2021-01-05 13:20 jianzhan
原生js实现html手机端城市列表索引选择城市     -He   这篇文章主要为大家详细介绍了原生js实现html手机端城市列表索引选择城市,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js实现手机端城市列表索引选择城市的具体代码,供大家参考,具体内容如下

html部分:

 div 
 div 
 div 
 input type="text" placeholder="中文 / 拼音首字母" id="findcityInp" 
 /div 
 div 定位城市 /div 
 div 上海市 /div 
 /div 
 div id='list' 
 section id="sectionBox" /section 
 nav id="navBar" /nav 
 /div 
 div /div 
 /div 

css部分:

 margin: 0;
 padding: 0;
 list-style: none;
html{
 font-size: 12px;
body {
 background-color: #f5f5f5;
 font-family: 'PingFang SC Regular', 'PingFang SC';
 width: 100%;
 height: 100%;
 min-width: 320px;
 max-width: 480px;
 position: relative;
.cityPage {
 width: 100%;
 height: 100%;
 /* border: 1px solid black; */
 position: relative;
 top: 0;
 display: flex;
 flex-direction: column;
 /* justify-content: center; */
.cityContent {
 width: 100%;
 height: 140px;
 /* border: 1px solid black; */
 background: #f7f7f9;
 position: fixed;
 z-index: 9999;
 top: 0;
.inputBox input {
 width: 90%;
 height: 30px;
 border: 1px solid rgb(215, 215, 215);
 outline: none;
 background: #fff;
 margin-left: 4%;
 border-radius: 4px;
 padding-left: 4px;
 color: #9e9e9e;
 font-size: 14px;
 margin-bottom: 16px;
 margin-top: 14px;
.localCity {
 color: #333;
 font-size: 13px;
 font-weight: bold;
 margin-left: 4.5%;
 margin-bottom: 16px;
.cityname {
 font-size: 13px;
 margin-left: 4.5%;
 margin-bottom: 16px;
#list {
 font-size: 13px;
 position: fixed;
 height: 100%;
 top: 140px;
 width: 100%;
 overflow: scroll;
 font-size: 15px;
 /* margin-bottom: 140px; */
 /* bottom: 200px; */
#list section {
 overflow-y: auto;
 height: 100%;
 margin-bottom: 140px;
#list section dl dt {
 background: #f7f7f9;
 color: #999;
 height: 40px;
 line-height: 40px;
 padding-left: 15px;
#list section dl dd {
 color: #333;
 line-height: 40px;
 padding-left: 15px;
 position: relative;
 background-color: #fff;
#list section dl dd:after {
 content: '';
 position: absolute;
 left: 0;
 bottom: 1px;
 width: 100%;
 height: 1px;
 background-color: #;
 transform: scaleY(.5);
 -webkit-transform: scaleY(.5);
#list section dl dd:last-of-type:after {
 display: none;
#navBar {
 position: fixed;
 width: 26px;
 height: 50%;
 right: 0;
 z-index: 30;
 top: 50%;
 display: flex;
 flex-direction: column;
 margin-top: -25%;
 /* text-align: center; */
#navBar.active {
 background: rgba(211, 211, 211, .6);
#navBar div {
 text-align: center;
 display: block;
 text-decoration: none;
 /* height: 4.166%;
 line-height: 100%; */
 color: #333;
 font-size: 13px;
 flex: 1;
.letterBox{
 width: 40px;
 height: 40px;
 background:#9f9f9f;
 opacity: .5;
 position: fixed;
 top: 50%;
 left: 50%;
 margin-top: -25px;
 margin-left: -25px;
 text-align: center;
 line-height: 40px;
 color: #fff;
 display: none;
}

js部分:

$(function () { 
 initCities(cityData);
 clickAction()
 //输入城市查询
 var key = false;
 $('#findcityInp').on('compositionstart', function () {
 key = true;
 console.log('不搜索')
 $('#findcityInp').on('compositionend', function (e) {
 var keyWord = $.trim(e.target.value);
 if(keyWord.length 0){
 var result = findCity(keyWord, cityData);
 initCities(result);
 bindEvent();
 }else{
 initCities(cityData);
 bindEvent();
 $('#findcityInp').on('change', function (e) {
 var keyWord = $.trim(e.target.value);
 console.log(keyWord)
 var result = findCity(keyWord, cityData);
 // console.log(result)
 initCities(result)
 //城市查询
 function findCity(keyWord, data) {
 if (!(data instanceof Array)) return;
 var reg = new RegExp(keyWord);
 var arr = [];
 var obj ={
 name:'',
 cities:[]
 if(keyWord.length 0 checkCh(keyWord)==false){
 data.forEach((item, index) = {
 item.cities.forEach((childItem, childIndex) = {
 if (childItem.tags.match(reg)) {
 obj.name = childItem.tags[0];
 obj.cities.push(childItem)
 arr=[obj]
 }else if(keyWord.length ==1 checkCh(keyWord)==true){
 data.forEach((item,index)= {
 if(item.name == keyWord){
 // console.log(item)
 arr.push(item)
 else{
 arr = data
 return arr;

cityData.forEach((item, index) = { g += " dl id=" + item.name + " dt " + item.name + " /dt item.cities.forEach((citiesItem, citiesIndex) = { g += " dd data-id=" + citiesItem.cityid + " data-name=" + citiesItem.name + " οnclick='clickAction()' " + citiesItem.name + " /dd " g += " /dl " $('section').append(g); var g = $('nav').height() / 26; var f = ''; cityData.forEach((item, index) = { // f += ' a href="#' + item.name + '" rel="external nofollow" style="height:' + g + "px;line-height:" + g + 'px" ' + item.name + " /a " f+=` div οnclick="toTarget(this)" ${item.name} /div ` $('nav').append(f);