直接看效果点这里
HTML
<!DOCTYPE html>
<html>
<head lang="zh-CN">
<meta charset="utf-8">
<title> 城市搜索 </title>
<link rel="stylesheet" href="ui-departure.css">
</head>
<body>
<h2>热门+城市分组</h2>
<input class="test" type="text"/>
<input class="test" type="text"/>
<h2>热门+搜索</h2>
<input class="test2" type="text"/>
<h2>热门+搜索+城市分组</h2>
<input class="test3" type="text"/>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script>
// 所有城市数据
var DEPARTURE_DATA = [{
"name": "北京",
"code": "bj",
"pinyin": "beijing"
}, {
"name": "重庆",
"code": "cq",
"pinyin": "chongqing"
}, {
"name": "香港",
"code": "xg",
"pinyin": "xianggang"
}, {
"name": "广州",
"code": "gz",
"pinyin": "guangzhou"
}, {
"name": "昆明",
"code": "km",
"pinyin": "kunming"
}, {
"name": "大连",
"code": "dl",
"pinyin": "daliang"
}, {
"name": "天津",
"code": "tj",
"pinyin": "tianjing"
}, {
"name": "海口",
"code": "hk",
"pinyin": "haikou"
}, {
"name": "成都",
"code": "cd",
"pinyin": "chengdu"
}, {
"name": "澳门",
"code": "am",
"pinyin": "aomen"
}];
// 热门出发城市
var DEPARTURE_HOT = [
{
"name": "全国",
"code": "qg"
},
{
"name": "郑州",
"code": "zz"
},
{
"name": "桂林",
"code": "gl"
}
];
</script>
<script src="jquery.ui-departure.js"></script>
<script>
//热门+城市分组
$(".test").each(function(){
var $this = $(this);
$this.Departure({
"ID": "J_Departure1",
"city_hot": DEPARTURE_HOT,
"city_data": DEPARTURE_DATA,
"hot_callback": function($This){
$this.val($This.html())
},
"city_callback": function($This){
$this.val($This.html())
},
"search_callback": function($This){
$this.val($This.html());
}
});
});
//热门+搜索
$(".test2").each(function(){
var $this = $(this);
$this.Departure({
"ID": "J_Departure2",
"isSearch": true,
"isGroup": false,
"city_hot": DEPARTURE_HOT,
"city_data": DEPARTURE_DATA,
"hot_callback": function($This){
$this.val($This.html())
},
"city_callback": function($This){
$this.val($This.html())
},
"search_callback": function($This){
$this.val($This.html());
}
});
});
//热门+搜索+城市分组
$(".test3").each(function(){
var $this = $(this);
$this.Departure({
"ID": "J_Departure3",
"isSearch": true,
"city_hot": DEPARTURE_HOT,
"city_data": DEPARTURE_DATA,
"hot_callback": function($This){
$this.val($This.html())
},
"city_callback": function($This){
$this.val($This.html())
},
"search_callback": function($This){
$this.val($This.html());
}
});
});
</script>
</body>
</html>
CSS
/**
* @description: 出发地
* @author: [email protected]
* @update: 2014/11/30
*/
/*reset*/
h3, dl, dt, dd, p, input { margin: 0; padding: 0; }
a { text-decoration: none; color: #333; cursor: pointer; }
a:hover,.ui-departure-search-result a:hover,.ui-departure-special { color: #f60; }
.ui-departure-hot a, .ui-departure-city a, .ui-departure-search-result a { white-space: nowrap; word-break: break-all; }
/*ui-departure*/
.ui-departure { position: absolute; z-index: 9999; width: 380px; padding: 0 10px; border: 1px #999 solid; background-color: #fff; color: #333; font: 12px/1.5 ‘simsun‘, arial, ‘sans-serif‘; }
.ul-departure-title { position: relative; height: 20px; line-height: 20px; font-weight: normal; color: #f60; padding: 5px 0 5px 10px; font-size: 12px; border-bottom: 1px #eee solid; }
.ul-departure-close { position: absolute; top: 5px; right: 0; padding: 0 2px 0 3px; font-size: 14px; font-weight: bold; color: #bbb; }
.ui-departure-hot { padding: 5px; overflow: hidden; border-bottom: 1px #eee solid; line-height: 24px; }
.ui-departure-hot a { float: left; margin-right: 10px; }
.ui-departure-search { padding: 10px 0 10px 20px; background-color: #f9f9f9; color: #999; border-bottom: 1px #eee solid; }
.ui-departure-search-label { padding: 0 14px; line-height: 26px; }
.ui-departure-search-text { width: 180px; padding: 4px 5px 5px; border: 1px #ccc solid; font: 12px/15px arial, "sans-serif"; }
.ui-departure-search-result { display: none; line-height: 24px; padding: 10px 0 0 100px; }
.ui-departure-search-result a { margin-right: 10px; color: #39f; }
.ui-departure-city { line-height: 21px; }
.ui-departure-city dl { padding: 5px 0 5px 5px; overflow: hidden; }
.ui-departure-city dt,.ui-departure-city dd { float: left; }
.ui-departure-city dt { width: 45px; font-weight: bold; color: #fff; background-color: #7abdea; text-align: center; }
.ui-departure-city dd { width: 330px; }
.ui-departure-city a { float: left; margin-left: 10px; }
JS
/**
* @description: 出发地
* @author: [email protected]
* @update: 2014/11/30
*
* @param {string} ID 给这个控件一个ID，默认自动生成，重绘避免重复生成，如果本页出现多次该控件最好填写不同的ID
* @param {json} city_hot 热门城市数据
* @param {json} city_data 需要分组的城市列表数据
* @param {function} hot_callback 点击热门城市的回调，参数返回当前对象
* @param {function} city_callback 点击所有城市的回调，参数返回当前对象
* @param {function} search_callback 搜索城市点击的回调，参数返回当前对象
* @param {bool} isGroup 是否显示分组（默认true）
* @param {bool} isSearch 是否显示搜索（默认false）
*/
;(function($){
var methods = {
init: function(options){
var This = this, box_html = ‘‘;
this.click(function(){
// 一个页面有多个该控件时先隐藏其他的
$(‘.ui-departure‘).hide();
var box = $(‘#‘+options.ID);
if(!box.length){
box = methods.createDeparture(options);
$(‘body‘).append(box);
}else{
box.show();
}
box_html = methods.createDepartureTitle(options) + methods.createHotCity(options);
if(options.isSearch){
box_html += methods.createSearch();
}
if(options.isGroup){
box_html += methods.createCityItems(options);
}
box
.css({
"top": This.offset().top + This.outerHeight(),
"left": This.offset().left
})
.html(box_html);
methods.bindEvent(options);
return false;
});
},
createDeparture: function(options){
var res = $(‘<div id="‘+options.ID+‘" class="ui-departure"></div>‘);
return res;
},
createDepartureTitle: function(){
return ‘<h3 class="ul-departure-title">热门出发城市<a class="ul-departure-close">×</a></h3>‘;
},
createHotCity: function(options){
var res = [‘<div class="ui-departure-hot">‘], city_hot = options.city_hot;
for (var i = 0, len = city_hot.length; i < len; i++) {
if(city_hot[i].name == ‘全国‘){
res.push(‘<a class="ui-departure-special">‘+ city_hot[i].name +‘</a>‘);
}else {
res.push(‘<a>‘+ city_hot[i].name +‘</a>‘);
}
}
res.push(‘</div>‘);
return res.join(‘‘);
},
createCityItems: function(options){
var res = [‘<div class="ui-departure-city">‘],
city_group = {
"A-G": [],
"H-L": [],
"M-T": [],
"W-Z": []
},
city_data = options.city_data;
// 城市分组
for (var i = 0, len = city_data.length; i < len; i++) {
if (/^[abcdefg]/.test(city_data[i].code.toLowerCase())){
city_group[‘A-G‘].push(‘<a>‘+ city_data[i].name +‘</a>‘);
}
else if (/^[hijkl]/.test(city_data[i].code.toLowerCase())){
city_group[‘H-L‘].push(‘<a>‘+ city_data[i].name +‘</a>‘);
}
else if (/^[mnopqrst]/.test(city_data[i].code.toLowerCase())){
city_group[‘M-T‘].push(‘<a>‘+ city_data[i].name +‘</a>‘);
}
else if (/^[wxyz]/.test(city_data[i].code.toLowerCase())){
city_group[‘W-Z‘].push(‘<a>‘+ city_data[i].name +‘</a>‘);
}
}
for (var n in city_group) {
if(city_group[n].length){
res.push(‘<dl><dt>‘+n+‘</dt>‘);
res.push(‘<dd>‘+city_group[n].join(‘‘)+‘</dd>‘);
res.push(‘</dl>‘);
}
}
res.push(‘</div>‘);
return res.join(‘‘);
},
createSearch: function(){
var res = [‘<div class="ui-departure-search">‘,
‘<label class="ui-departure-search-label">输入出发城市</label>‘,
‘<input class="ui-departure-search-text" type="text"/>‘,
‘<div class="ui-departure-search-result">‘,‘</div>‘,‘</div>‘];
return res.join(‘‘);
},
/**
* 在城市数据里查找符合val的城市
* @param data {object} 特定格式
* @param val {string}
* @param maxLen {number} 返回的数组最多几项
*
* @return {array} 返回符合条件的数组
*/
searchCity: function(data, val, maxLen){
var res = [], city_data = data, thisVal = $.trim(val);
for (var i = 0, len = city_data.length; i < len; i++) {
if((/^[\u4e00-\u9fa5]+$/.test(thisVal) && city_data[i].name.indexOf(thisVal) === 0) ||
(/^[a-zA-Z]+$/.test(thisVal) && city_data[i].code.indexOf(thisVal) === 0) ||
(/^[a-zA-Z]+$/.test(thisVal) && city_data[i].pinyin.indexOf(thisVal) === 0)){
res.push(city_data[i].name);
if(res.length >= maxLen) {
break;
}
}
}
return res;
},
bindEvent: function(options){
var box = $(‘#‘+options.ID);
box
// close
.find(".ul-departure-close").click(function(){
box.hide();
}).end()
// hot city callback
.find(".ui-departure-hot a").click(function(){
options.hot_callback($(this));
box.hide();
}).end()
// search city
.find(".ui-departure-search-text").keyup(function(){
var thisVal = $(this).val(), searchResultCity = methods.searchCity(options.city_data, thisVal, 2);
if(searchResultCity.length){
box.find(‘.ui-departure-search-result‘).html(‘<a>‘+ searchResultCity.join(‘</a><a>‘) +‘</a>‘).find(‘a‘).click(function(){
options.search_callback($(this));
box.hide();
}).end().show();
}else{
if(thisVal == ‘‘){
box.find(‘.ui-departure-search-result‘).hide();
}else{
box.find(‘.ui-departure-search-result‘).text(‘亲，暂时无搜索结果‘).show();
}
}
}).end()
// city callback
.find(".ui-departure-city a").click(function(){
options.city_callback($(this));
box.hide();
});
// document close
$(document).click(function(e){
if($(e.target).attr(‘id‘) != options.ID && !$(e.target).parents(‘#‘+options.ID).length){
box.hide();
}
});
}
};
$.fn.Departure = function(options){
options = $.extend({
"ID": "J_Departure"+Math.floor(new Date().getTime()),
"isGroup": true,
"isSearch": false,
"city_hot": [],
"city_data": [],
"hot_callback": function(){},
"city_callback": function(){},
"search_callback": function(){}
}, options || {});
return this.each(function(){
methods.init.call($(this), options);
});
};
})(jQuery);
时间： 2024-10-28 22:43:59