原生js实现html手机端城市列表索引选择城市


Posted in Javascript onJune 24, 2020

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

html部分:

<div class="cityPage">
 <div class="cityContent">
 <div class="inputBox">
 <input type="text" placeholder="中文 / 拼音首字母" id="findcityInp">
 </div>
 <div class="localCity">定位城市</div>
 <div class="cityname">上海市</div>
 </div>
 <div id='list'>
 <section id="sectionBox"></section>
 <nav id="navBar"></nav>
 </div>
 <div class="letterBox"></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: #c8c7cc;
 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;
 }
 

function checkCh(str){
 var RegExp = /^[a-zA-Z]{1}$/;
 return RegExp.test(str);  
}
//点击右边描点
function toTarget(tag){
 var text = $(tag).text();
 location.href = "#"+text;
 $('.letterBox').html(text);
$('.letterBox').show()
setTimeout(function(){
 $('.letterBox').hide()
},1000)

}
//初始化城市列表
function initCities(cityData) {
 var g = "";
 $('section').html('');
 $('nav').html('')
 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 + " class='list' ο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)" style="height:${g}px;line-height:${g}px">${item.name}</div>`
 })
 $('nav').append(f);
}



//点击城市列表某城市
function clickAction(){
 $('.list').click(function (e) {
 console.log(e.target.getAttribute('data-name'))
 })
}

原生js实现html手机端城市列表索引选择城市

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js静态作用域的功能。
Dec 25 Javascript
jquery阻止冒泡事件使用模拟事件
Sep 06 Javascript
jquery.cookie.js使用指南
Jan 05 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
Sep 11 Javascript
JS Array.slice 截取数组的实现方法
Jan 02 Javascript
BootStrap网页中代码显示用法详解
Oct 21 Javascript
jQuery实现两个select控件的互移操作
Dec 22 Javascript
vue+element 模态框表格形式的可编辑表单实现
Jun 07 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 Javascript
微信小程序自定义底部弹出框功能
Nov 18 Javascript
JavaScript实现原型封装轮播图
Dec 27 Javascript
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
jQuery实时统计输入框字数及限制
Jun 24 #jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 #jQuery
JS forEach跳出循环2种实现方法
Jun 24 #Javascript
js判断鼠标移入移出方向的方法
Jun 24 #Javascript
JS判断数组是否包含某元素实现方法汇总
Jun 24 #Javascript
JS script脚本中async和defer区别详解
Jun 24 #Javascript
javascript实现前端分页效果
Jun 24 #Javascript
You might like
php更新修改excel中的内容实例代码
2014/02/26 PHP
html静态页面调用php文件的方法
2014/11/13 PHP
PHP用反撇号执行外部命令
2015/04/14 PHP
Javascript 二维数组
2009/11/26 Javascript
jquery随机展示头像代码
2011/12/21 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
JavaScript基础知识学习笔记
2014/12/02 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
AngularJS入门教程之XHR和依赖注入详解
2016/08/18 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
详解AngularJS跨页面传值(ui-router)
2017/08/23 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
js中console在一行内打印字符串和对象的方法
2019/09/10 Javascript
vue模块移动组件的实现示例
2020/05/20 Javascript
[01:45]绝对公平!DOTA2队长征召模式详解
2014/04/25 DOTA
py2exe 编译ico图标的代码
2013/03/08 Python
使用Python进行稳定可靠的文件操作详解
2013/12/31 Python
Python中断言Assertion的一些改进方案
2016/10/27 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
Python使用Django实现博客系统完整版
2020/09/29 Python
Python使用 Beanstalkd 做异步任务处理的方法
2018/04/24 Python
python os模块简单应用示例
2019/05/23 Python
Python列表删除元素del、pop()和remove()的区别小结
2019/09/11 Python
Python 实现自动完成A4标签排版打印功能
2020/04/09 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
2019/10/15 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
2011/10/18 HTML / CSS
美国摩托车头盔、零件、齿轮及配件商店:Cycle Gear
2019/06/12 全球购物
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
俄罗斯皮肤健康中心:Pharmacosmetica.ru
2020/02/22 全球购物
标准毕业生自荐信范文
2013/11/04 职场文书
初中毕业生的自我评价
2014/03/03 职场文书
实验室标语
2014/06/21 职场文书
女儿满月酒致辞
2015/07/29 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书