城市筛选检索
来源：互联网 发布：建筑学需要用的软件 编辑：程序博客网 时间：2024/05/17 01:29
<!--------输入框----------> <div class="CityBox"> <input class="CityName" name="CityName" type="serch" placeholder="输入城市名" value="" /> <!------输入时列表-------> <div class="search_ajax"> <ul> <li></li> </ul> </div> </div> <!-------城市列表序号----------> <div class="Letter"></div> <div class="CityNumber"> <ul> <li>#</li> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> <li>F</li> <li>G</li> <li>H</li> <li>I</li> <li>J</li> <li>K</li> <li>L</li> <li>M</li> <li>N</li> <li>O</li> <li>P</li> <li>Q</li> <li>R</li> <li>S</li> <li>T</li> <li>U</li> <li>V</li> <li>W</li> <li>X</li> <li>Y</li> <li>Z</li> </ul> </div> <!-------城市列表----------> <div class="CityList"> <p id="A">A</p> <ul> <li>安吉市</li> <li>安康市</li> </ul> <p id="B">B</p> <ul> <li>安吉市</li> <li>安康市</li> </ul> <p id="C">C</p> <ul> <li>安吉市</li> <li>安康市</li> </ul> <p id="D">D</p> <ul> <li>安吉市</li> <li>安康市</li> </ul> <p id="E">E</p> <ul> <li>安吉市</li> <li>安康市</li> </ul> <p id="F">F</p> <ul> <li>安吉市</li> <li>安康市</li> </ul> <p id="G">G</p> <ul> <li>安吉市</li> <li>安康市</li> </ul> <p id="H">H</p> <ul> <li>安吉市</li> <li>安康市</li> </ul> <p id="I">I</p> <ul> <li>安吉市</li> <li>安康市</li> </ul> <p id="J">J</p> <ul> <li>安吉市</li> <li>安康市</li> </ul> <p id="K">K</p> <ul> <li>安吉市</li> <li>安康市</li> </ul> <p id="L">L</p> <ul> <li>安吉市</li> <li>安康市</li> </ul> <p id="M">M</p> <ul> <li>安吉市</li> <li>安康市</li> </ul> <p id="N">N</p> <ul> <li>安吉市</li> <li>安康市</li> </ul> <p id="O">O</p> <ul> <li>安吉市</li> <li>安康市</li> </ul> <p id="P">P</p> <ul> <li>安吉市</li> <li>安康市</li> </ul> <p id="Q">Q</p> <ul> <li>安吉市</li> <li>安康市</li> </ul> <p id="R">R</p> <ul> <li>安吉市</li> <li>安康市</li> </ul> <p id="S">S</p> <ul> <li>安吉市</li> <li>安康市</li> </ul> <p id="T">T</p> <ul> <li>安吉市</li> <li>安康市</li> </ul> <p id="U">U</p> <ul> <li>安吉市</li> <li>安康市</li> </ul> <p id="V">V</p> <ul> <li>安吉市</li> <li>安康市</li> </ul> <p id="W">W</p> <ul> <li>安吉市</li> <li>安康市</li> </ul> <p id="X">X</p> <ul> <li>安吉市</li> <li>安康市</li> </ul> <p id="Y">Y</p> <ul> <li>安吉市</li> <li>安康市</li> </ul> <p id="Z">Z</p> <ul> <li>安吉市</li> <li>安康市</li> </ul> </div>
/************** 城市搜索 ****************/.CityBox{ width:7.5rem; height:100%; border-bottom:1px solid #cecece; position:relative;}.CityBox input{ width:6.42rem; height:.61rem; font-size:.28rem; color:#9b9b9b; background:url("../images/serch.png") no-repeat; background-size:.28rem .27rem; background-position:.23rem center; background-color:#e0e0e0; border:none; outline:none; display:block; border-radius:4px; margin:0 auto; margin-top:.27rem; margin-bottom:.27rem; padding-left:.65rem; box-sizing:border-box;}.search_ajax{ width: 6.42rem; height:auto; max-height:7.5rem; overflow:auto; border:1px solid #eee; background:#fff; margin:0 auto; position: absolute; left:0; right:0; top:.61rem; font-size:.26rem; box-sizing:border-box;}.search_ajax ul{ display:none;}.search_ajax ul li{ height:.65rem; line-height:.65rem; border-bottom:1px solid #eee; padding-left:.3rem;}.CurrentCity{ font-size:.3rem; height:1rem; line-height:1rem; padding-left:.45rem; margin-right:.88rem; background:url("../images/dw2.png") no-repeat; background-color:#fff; background-size:.53rem .53rem; background-position:right center; font-family: "微软雅黑";}.cityIcon { float:right; width:30px; height:50px; cursor:pointer;}/**********************城市列表序号*************************/.Letter{ width:1.8rem; height:1.8rem; background:rgba(0,0,0,0.6); border-radius:4px; text-align:center; line-height:1.8rem; color:#fff; font-size:.6rem; font-family:"微软雅黑"; position:fixed; top:0; bottom:0; left:0; right:0; margin:auto; display:none;}.CityNumber{ width: .71rem; text-align: center; position: fixed; top:0; padding-top: 50px; bottom: 0; right: 0; font-size: .2rem; color: #ec5151; font-family: "微软雅黑"; display: -webkit-box; display: -moz-box; display: -ms-box; display: -o-box; box-align: center; -webkit-box-align: center; -moz-box-align: center; -ms-box-align: center; -o-box-align: center;}.CityNumber ul{ width: 100%;}.CityNumber ul li{ height:22px;}.CityNumber ul li a{ display:block;}/**********************城市列表*************************/.CityList{ width: 7.5rem; height: 100%; overflow: hidden; font-size:.3rem; color: #353535; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-family: "微软雅黑";}.CityList P{ margin: 0; padding-top: .18rem; padding-bottom: .18rem; padding-left: .34rem; background: #f3f4f8; border-bottom: 1px solid #d8d8d8;}.CityList ul{ height: 100%; overflow: hidden;}.CityList ul li{ height: .98rem; line-height: .98rem; border-bottom: 1px solid #d8d8d8; padding-left: .34rem;} //城市检索 $(function(){ var data = []; $.ajax({ url: getSiteurl() + "/api/City/AreasList/", //此处在WebApi中写获取全国城市列表方法 type: "POST", success: function (result) { $(".CityList").html(""); var htmlLi = "", htmlUl = ""; if (result.length > 0) { var upFirstLetter = ""; for (var i = 0; i < result.length; i++) { var item = result[i]; var id = result[i].Id; var Name = result[i].ShortName; var fLetter = result[i].FirstLetter; if (fLetter != upFirstLetter) { // console.log("===================" + fLetter + "==============================="); htmlUl += '<p id="' + upFirstLetter + '">' + upFirstLetter + '</p>' + htmlLi; htmlLi = ""; } else { //console.log("地区:" + Name + "-----首字母:" + fLetter); data.push(Name + "|" + fLetter + "|" + id) htmlLi += "<ul><li onclick=\"SearchCity(" + id + ",'" + Name + "')\"><a href=\"../index.html?cityId=" + id + "\"> " + Name + "</a></li></ul>"; } //赋值 upFirstLetter = result[i].FirstLetter; } // console.log(data) //输入框城市搜索 $(".CityName").on("keyup", function () { var kw = $.trim($(this).val()).toUpperCase();//转大写 if (kw == "") { $(".search_ajax ul").hide().html(""); return false; } var html = ""; for (var i = 0; i < data.length; i++) { if (data[i].indexOf(kw) != -1) { if (kw == "|") { html = "<li>无此城市</li>"; } else { var result = data[i].split("|"); html += "<a href=\"../index.html?cityId=" + result[2] + "\"><li > " + result[0] + "</li></a>" } } } //数组中没有,则显示无此城市 if (data.toString().indexOf(kw) == -1) { html = "<li>无此城市</li>"; } $(".search_ajax ul").show().html(html); }) $(".CityList").append(htmlUl); } } }); });
0 0
- 城市筛选检索
- 检索,查询,筛选,过滤
- DataTable排序,检索,合并,筛选
- 城市检索并展示图片
- listview 通过筛选全部城市显示出搜索的城市
- Ajax筛选检索Filter高级插件(OpenCart)
- 检索最多城市的省sql
- 使用百度地图API进行城市检索
- 腾讯地图根据城市 地名 检索信息
- android城市选择器 支持关键字、拼音检索 首字母滑动检索
- 筛选
- 筛选
- 筛选
- ionic+AngularJs项目中实现三级联动效果，筛选省份、城市、区县
- 城市
- 城市
- 城市
- 城市
- mysql设置wait_timeout详解
- 系统负载能力浅析
- mybatis系列-Mapper XML 文件（三）
- Android WebView与JavaScript的交互使用
- linux shell脚本自动从git上拉取maven代码编译打war包并发布到tomcat
- 城市筛选检索
- IOS开发之手势——UIGestureRecognizer
- HTML、CSS、JS Unicode字符互转
- 常见的几种RuntimeException
- 【集群管理】数据挂载mount命令及批处理dsh命令
- 原生 Hive 1.2.1 的安装
- angular自己最近使用的一种筛选方法
- NMAP分布式扫描工具dnmap
- mybatis系列-动态 SQL（四）
