城市搜索

  • 项目中最近需要实现一个城市搜索导航的。效果大体如下。

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<header class="head-fixed" style="background: #FFFFFF;">
<div class="city-search-wrap">
<div id="city-search">
<i class="sprite-search icon-search"></i>
<input type="text" class="ser-txt" placeholder="请输入城市名" id="searchContext" maxlength="50">
</div>
</div>
</header>
<section class="choose-city-wrap">
<div class="box">
<div class="city-list-title">当前城市</div>
<div class="city-list clear">
<span class="nowCity chooseCity" style="display: none">深圳</span>
<span class="nowCity">定位失败<img src="images/circle@2x.png" class='seekFailed' /></span>
</div>
</div>
<div class="box">
<div class="city-list-title" id="A">A</div>
<div class="city-list clear">
<span class="nowCity" data-name="北京">北京<i></i></span>
<span class="nowCity" data-name="深圳">深圳<i></i></span>
<span class="nowCity" data-name="沈阳">沈阳</span>
</div>
</div>
</div>
<div class="choose-city-chart">
<a href="javascript:void(0);">#</a>
<a href="javascript:void(0);" data-key="A">A</a>
<a href="javascript:void(0);" data-key="B">B</a>
<a href="javascript:void(0);" data-key="C">C</a>
<a href="javascript:void(0);" data-key="D">D</a>
<a href="javascript:void(0);" data-key="F">F</a>
<a href="javascript:void(0);" data-key="G">G</a>
<a href="javascript:void(0);" data-key="H">H</a>
<a href="javascript:void(0);" data-key="J">J</a>
</div>
</section>
<div class="city-search-list">
<div class="mask"></div>
<div class="search-list">
<a name="city" data-code="null" data-name="惠州">惠州</a>
<a name="city" data-code="null" data-name="深圳">深圳</a>
<a name="city" data-code="null" data-name="广州">广州</a>
</div>
</div>

这边主要列出主要的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
/**
* 一般来说,录数据库的会输入助力码 例如 惠州 hz
*/
var city=[];
$("#searchContext").on("focus", function() {
$(".city-search-list").show();
$(".city-search-list .mask").show();
$("body").css('overflow', 'hidden');
$(".city-search-list .search-list").hide();
}).on("input propertychange", function() {
var val = $.trim($(this).val());
if (val == "") {
$(".city-search-list .mask").show();
$("body").css('overflow', 'hidden');
$(".city-search-list .search-list").hide();
return;
}
//1.如果输入的是拼音 匹配首字母 2.输入的字,匹配所有含有字的
val = val.toUpperCase();
$("#searchList").html("");
if (val.length == 1) {
var id = $(".city-list-title[id=" + val + "]");
if (id.length == 0) {
$("#searchList").html('<span style="font-size:0.28rem;margin-top:10px;display:block">暂无匹配结果</span>');
} else if (id.length == 1) {
city=[];
var obj=id.next().find('span');
for(var i=0;i<obj.length;i++){
$("#searchList").append(' <a name="city" data-code="null" data-name='+obj.eq(i).attr('data-name')+'>'+obj.eq(i).attr('data-name')+'</a>');
city.push(obj.eq(i).attr('data-name'));
}
}
}else if(val.length>=2){
for(var i=0;i<city.length;i++){
if(getPinYinFirstCharacter(city[i],"",true).indexOf(val)>-1){
$("#searchList").append(' <a name="city" data-code="null" data-name='+city[i]+'>'+city[i]+'</a>');
}
}
}else{
$("#searchList").html('<span style="font-size:0.28rem;margin-top:10px;display:block">暂无匹配结果</span>');
}
$(".city-search-list .search-list").show();
})
$("#searchList").on('click','a',function(){
$(".chooseCity").html($(this).html());
$(".city-search-list .search-list").hide();
$(".city-search-list .mask").hide();
$("body").css('overflow', 'unset');
})
// 字母定位
$(".choose-city-chart").on("click", "a", function() {
var key = $(this).data("key");
$("body,html").animate({
"scrollTop": $("#" + key).offset().top - $(".head-fixed").outerHeight() - 10
}, 100);
});
$("body").on("click", "span.nowCity", function() {
var val = $(this).data('name');
$(".chooseCity").show().html(val).css('color', 'red');
$(".chooseCity").next().hide();
$("body,html").animate({
"scrollTop": $(".chooseCity").offset().top - $(".head-fixed").outerHeight() - 10
}, 100);
})

功能还是比较简单的。主要是样式写的漂亮一点就可以了。

  1. 新增功能点
    给右边的导航栏新增了一个滚轮滑动到响应位置对应A标签变颜色。

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!--这是新增代码-->
$(window).scroll(function() {
var scrollTop = $(document).scrollTop();
var oItem = $(".choose-city-wrap").find('.box');
var oName = '';
$.each(oItem, function(i) {
var oneItem = $(this);
if (i == 0) { //剔除掉当前城市
return;
}
var offsetTop = oneItem.offset().top;
if (offsetTop - scrollTop < oneItem.prev().height()) { //当上一个彻底看不见时再跳到下一个
oName = oneItem.find('.city-list-title').attr("id");
$(".choose-city-chart a.curr").removeClass("curr");
$(".choose-city-chart").find("[data-key=" + oName + "]").addClass("curr");
}
})
})
<!--前代码修改-->
// 字母定位
$(".choose-city-chart").on("click", "a", function() {
var key = $(this).data("key");
$("body,html").animate({
"scrollTop": $("#" + key).offset().top - $(".head-fixed").outerHeight() - 10
}, 100);
$(this).addClass('curr').siblings('a').removeClass('curr'); //这时候记得写一个curr的样式。eg:color:#e03236;
if ($(document).height() == $('body').height() + $(window).scrollTop()) { //判断滚动条是不是到底了,到底之后需要自己加上样式。因为为true时,不会触发scroll事件,所以需要手动加上
$(this).addClass('curr').siblings('a').removeClass('curr');
}
});

详细的代码请看 https://github.com/sulishibaobei/searchCity.git

谢谢你给我的支持,坚持原创技术分享,共同成长