原生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 相关文章推荐
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
Feb 05 Javascript
js 方法实现返回多个数据的代码
Apr 30 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
Dec 11 Javascript
JavaScript 创建运动框架的实现代码
May 08 Javascript
jQuery中[attribute*=value]选择器用法实例
Dec 31 Javascript
使用jquery动态加载Js文件和Css文件
Oct 24 Javascript
针对JavaScript中this指向的简单理解
Aug 26 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
vue快捷键与基础指令详解
Jun 01 Javascript
微信小程序实现鼠标拖动效果示例
Dec 01 Javascript
JS实现简单的星期格式转换功能示例
Jul 23 Javascript
JS实现图片切换效果
Nov 17 Javascript
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实现比较全的数据库操作类
2015/06/18 PHP
PHP中new static()与new self()的比较
2016/08/19 PHP
PHP简单装饰器模式实现与用法示例
2017/06/22 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
PHP面向对象程序设计重载(overloading)操作详解
2019/06/13 PHP
javascript 事件绑定问题
2011/01/01 Javascript
JS读取XML文件示例代码
2013/11/15 Javascript
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
判断及设置浏览器全屏模式
2014/04/20 Javascript
js重写alert控件(适合学习js的新手朋友)
2014/08/24 Javascript
JavaScript事件委托实例分析
2015/05/26 Javascript
jQuery右下角悬浮广告实例
2016/10/17 Javascript
微信开发 使用picker封装省市区三级联动模板
2016/10/28 Javascript
js return返回多个值,通过对象的属性访问方法
2017/02/21 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
2017/02/22 Javascript
React Native中Navigator的使用方法示例
2017/10/13 Javascript
thinkjs 文件上传功能实例代码
2017/11/08 Javascript
Vue.js用法详解
2017/11/13 Javascript
详解利用Angular实现多团队模块化SPA开发框架
2017/11/27 Javascript
Python之自动获取公网IP的实例讲解
2017/10/01 Python
python将音频进行变速的操作方法
2020/04/08 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
Python while true实现爬虫定时任务
2020/06/08 Python
python与idea的集成的实现
2020/11/20 Python
selenium判断元素是否存在的两种方法小结
2020/12/07 Python
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
联想韩国官网:Lenovo Korea
2018/05/10 全球购物
澳大利亚珠宝商:Shiels
2019/10/06 全球购物
校园安全广播稿范文
2014/09/25 职场文书
python中pandas.read_csv()函数的深入讲解
2021/03/29 Python
一劳永逸彻底解决pip install慢的办法
2021/05/24 Python
浅谈PHP7中的一些小技巧
2021/05/29 PHP
解析Java异步之call future
2021/06/14 Java/Android
详细了解java监听器和过滤器
2021/07/09 Java/Android
Python NumPy灰度图像的压缩原理讲解
2021/08/04 Python