JS实现导航城市列表和输入搜索功能

本文的例子分享了JS实现导航城市列表和输入搜索功能显示的具体代码，供大家参考。具体内容如下

实现功能：

1.加载城市列表并生成索引(没有索引的城市没有索引)。2.单击索引，将页面滚动到相应索引城市的第一个位置。3.进入搜索

分析：

1.很容易加载城市并生成相应的索引。

首先，我们需要得到所有的城市，然后取出城市的第一个字母，将它们放入一个数组中，复制并排序它们，得到一个没有重复和顺序的索引数组，然后将它们添加到div中进行显示

2.根据索引滚动页面

有必要向索引列表中添加事件。因为锚点会在链接中生成一个带有#的地址，页面会有刷屏的效果，所以在索引中不使用锚点，而是使用jquery或者js自己滚动页面。

3.搜索

首先检索全身内容，然后在城市列表中检索内容，找到具体位置，然后高亮显示，通过添加类或其他快速定位

剩下的就是风格问题了。

渲染：

代码：

% @ page language=' Java ' ContentType=' text/html；charset=UTF-8 ' page encoding=' UTF-8 ' % % @ include file='/WEB-INF/page/common/tablib . JSP ' %！doctype html lang=' zh ' head meta name=' viewport ' content=' width=device-width，initial-scale=1.0，maximum-scale=1.0 ' charset=' utf-8 '/title/title script var title=' select '；Title=' citydocument.title=title/script link rel='样式表' href=' %=basePATH %/CSS/base . CSS ' rel='外部nofollow '脚本src=' http :%=basePATH %/js/jquery-1 . 9 . 0 . min . js '/script link rel='样式表' href=' %=basePATH %/partner CSS/$ { style _ path }。CSS ' rel=' external no follow ' style a : link，a : visited { text-decoration : none；/*不带下划线的超链接*/color:蓝色；} # float _ zm { margin : 2% 2% 2% *；z指数： 90；宽度：11%；高度：90%；right: 5px位置：固定；} # city _ div { padd : 0% 2% 2% 1%；宽度：100%；向左浮动：利润率-top : 2%；} # float _ table { right : 5%；top : 9%；位置：固定；高度：90%；文本对齐：中心；颜色：蓝色；宽度：25%；} # float _ table tr TD { text-align : right；} #数据{ width :100%；} # data tr TD { border-bottom : 1px solid # e5e 5；padd : 2% 1% 2% 1；} # data tr TD a { width :100%；} .突出显示{ background:黄色；颜色：红色；} # showSelectZm { position : absolute；左侧：45%；top :40%；border333