直接看效果点这里
HTML
<!DOCTYPE html>
<html>
<head lang="zh-CN">
<meta charset="utf-8">
<title> 目的地搜索 </title>
<link rel="stylesheet" href="ui-destination.css">
<style>
.city, .type { overflow: hidden; }
.city li, .type li { float: left; padding: 0 10px; margin: 0 5px; display: inline; background-color: #f60; cursor: pointer; color: #fff; }
</style>
</head>
<body>
<input class="test" type="text"/>
<input class="test" type="text"/>
<h2>选择类型</h2>
<ul class="type">
<li data-type="">空：全国</li>
<li data-type="1">1：机位</li>
<li data-type="2">2：出发地参团</li>
<li data-type="3">3：目的地参团</li>
<li data-type="4">4：自由行</li>
</ul>
<h2>选择城市</h2>
<ul class="city">
<li data-city="">空：全国</li>
<li data-city="北京">北京</li>
<li data-city="上海">上海</li>
<li data-city="广州">广州</li>
<li data-city="重庆">重庆</li>
<li data-city="四川">四川</li>
</ul>
<h2>选择的值</h2>
<input class="selected" type="text" value=""/>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script src="jquery.ui-destination.js"></script>
<script>
// data
var DESTINATION_DATA = [{"keyType":2,"name":"西欧","quantity":555,"pinyin":"xiou","productType":"2","associate":"北京,上海,沈阳,西安,天津,乌鲁木齐,广州,武汉,青岛"},{"keyType":2,"name":"法国","quantity":417,"pinyin":"faguo","productType":"2","associate":"北京,沈阳,上海,西安,天津,乌鲁木齐,广州,武汉,青岛"},{"keyType":2,"name":"瑞士","quantity":407,"pinyin":"ruishi","productType":"2","associate":"北京,沈阳,上海,西安,天津,乌鲁木齐,广州,武汉,青岛"},{"keyType":2,"name":"意大利","quantity":375,"pinyin":"yidali","productType":"2","associate":"北京,沈阳,上海,西安,天津,乌鲁木齐,广州,武汉,青岛"},{"keyType":2,"name":"德国","quantity":330,"pinyin":"deguo","productType":"2","associate":"北京,上海,沈阳,西安,天津,乌鲁木齐,广州,武汉,青岛"},{"keyType":2,"name":"泰国","quantity":295,"pinyin":"taiguo","productType":"2,4","associate":"北京,昆明,天津,上海"},{"keyType":2,"name":"东欧","quantity":234,"pinyin":"dongou","productType":"2","associate":"北京,西安,上海,沈阳,乌鲁木齐,天津,广州,武汉"},{"keyType":3,"name":"海岛","quantity":227,"pinyin":"haidao","productType":"2,3,4","associate":"北京,上海,天津,西安,青岛"},{"keyType":2,"name":"普吉岛","quantity":209,"pinyin":"pujidao","productType":"2","associate":"北京,上海"},{"keyType":2,"name":"日本","quantity":207,"pinyin":"riben","productType":"2","associate":"上海,北京,武汉,长沙,天津,乌鲁木齐,西安"},{"keyType":1,"name":"曼谷","quantity":201,"pinyin":"mangu","productType":"2","associate":"北京,合肥,南京,天津,昆明"},{"keyType":2,"name":"洛杉矶","quantity":187,"pinyin":"luoshanji","productType":"2","associate":"北京,武汉,天津,西安,青岛"},{"keyType":2,"name":"东京","quantity":183,"pinyin":"dongjing","productType":"2","associate":"北京,武汉,长沙,天津,乌鲁木齐,西安"},{"keyType":1,"name":"华东","quantity":180,"pinyin":"huadong","productType":"2","associate":"北京"},{"keyType":2,"name":"拉斯维加斯","quantity":176,"pinyin":"lasiweijiasi","productType":"2","associate":"北京,天津,西安,武汉,青岛"}];
$(‘.test‘).Destination({
"ID": "J_Destination",
"city_data": DESTINATION_DATA,
"search_limit": 10
});
// 切换城市
$(‘.city li‘).click(function(){
$(‘.test‘).Destination.options.associate = $(this).data(‘city‘);
$(‘.selected‘).val(‘城市：‘+$(‘.test‘).Destination.options.associate+‘,类型：‘+$(‘.test‘).Destination.options.type);
});
// 切换类型
$(‘.type li‘).click(function(){
$(‘.test‘).Destination.options.type = $(this).data(‘type‘);
$(‘.selected‘).val(‘城市：‘+$(‘.test‘).Destination.options.associate+‘,类型：‘+$(‘.test‘).Destination.options.type);
});
</script>
</body>
</html>
CSS
/**
* @description: 热门搜索+检索
* @author: [email protected]
* @update: 2014/11/28
*/
/*reset*/
h3, dl, dt, dd, ul, li, p { margin: 0; padding: 0; }
li { list-style: none; }
a { text-decoration: none; color: #333; cursor: pointer; }
a:hover,.ul-destination-keys { color: #f60; }
/*ul-destination*/
.ul-destination { position: absolute; z-index: 9999; width: 420px; border: 1px #999 solid; background-color: #fff; color: #333; font: 12px/1.5 ‘simsun‘, arial, ‘sans-serif‘; }
.ul-destination-title { position: relative; height: 20px; line-height: 20px; color: #f60; padding: 5px 5px 5px 10px; font-size: 12px; border-bottom: 1px #eee solid; }
.ul-destination-close { position: absolute; top: 5px; right: 5px; padding: 0 2px 0 3px; font-size: 14px; color: #bbb; }
.ul-destination-item { padding: 10px 10px 0; line-height: 24px; overflow: hidden; }
.ul-destination-item dt { line-height: 18px; font-weight: bold; }
.ul-destination-item dd { margin-bottom: 10px; overflow: hidden; }
.ul-destination-item a { float: left; margin-right: 12px; white-space: nowrap; word-break: break-all; }
.ul-destination-list { line-height: 26px; }
.ul-destination-list a { position: relative; display: block; overflow: hidden; height: 26px; padding: 0 10px; }
.ul-destination-list a:hover,.ul-destination-list .active a { background-color: #7ba5de; color: #fff; }
.ul-destination-count { position: absolute; top: 0; right: 10px; }
.ul-destination-tips { text-align: center; color: #999; margin: 15px 0; }
JS
/**
* @description: 目的地
* @author: [email protected]
* @update: 2014/11/30
*
* @param {string} ID 给这个控件一个ID，默认自动生成，重绘避免重复生成，如果本页出现多次该控件最好填写不同的ID
* @param {json} city_data 城市列表数据
* @param {id/number} type 获取这个ID的val，产品类型，1机位、2出发地参团、3目的地参团、4自由行
* @param {id/string} associate 获取这个ID的val，关联词，默认空
* @param {number} limit_city 全部城市显示长度控制，默认128
* @param {json} city_callback 点击城市的回调函数，参数返回当前对象
* @param {json} search_callback 点击搜索结果的回调函数，参数返回当前对象
*/
;(function($){
var methods = {
init: function(options){
methods.bindEvent(options, this);
},
createDestination: function(options){
var box = $(‘<div id="‘+options.ID+‘" class="ul-destination"></div>‘);
return box;
},
createDestinationTitle: function(){
return ‘<h3 class="ul-destination-title">推荐<a class="ul-destination-close">×</a></h3>‘;
},
createCityItems: function(options){
var city_data = options.city_data,
oCity_type = $(‘#‘+options.type),
city_type = oCity_type.length ? oCity_type.val() : options.type,
oCity_associate = $(‘#‘+options.associate),
city_associate = oCity_associate.length ? oCity_associate.val() : options.associate,
res = [‘<dl class="ul-destination-item">‘],
city_group = {},
keyTypeText = ["", "国内", "国际", "主题"];
for (var i = 0, len = city_data.length; i < len; i++){
if((city_data[i].productType.indexOf(city_type) != -1 || city_type == ‘‘)
&& (city_data[i].associate.indexOf(city_associate) != -1 || city_associate == ‘‘)) {
if(typeof city_group[city_data[i].keyType] == ‘undefined‘){
city_group[city_data[i].keyType] = [];
}
city_group[city_data[i].keyType].push(city_data[i]);
}
}
for (var n in city_group){
res.push(‘<dt>‘+keyTypeText[n]+‘</dt><dd>‘);
for (var m = 0, limit = 0, lenM = city_group[n].length; m < lenM; m++){
limit += this.getStrLen(city_group[n][m].name) + 2;
if(limit > options.limit_city) {
break;
}
res.push(‘<a>‘ + city_group[n][m].name + ‘</a>‘);
}
res.push(‘</dd>‘);
}
return res;
},
getStrLen: function (target){
var s = target.replace(/[^\x00-\xff]/g, "**");
return s.length;
},
searchCity: function(options, This){
var city_data = options.city_data,
oCity_type = $(‘#‘+options.type),
city_type = oCity_type.length ? oCity_type.val() : options.type,
oCity_associate = $(‘#‘+options.associate),
city_associate = oCity_associate.length ? oCity_associate.val() : options.associate,
box = $(‘#‘+options.ID),
res = [‘<ul class="ul-destination-list">‘],
res_item = [],
res_keys = This.val();
for(var i = 0, len = city_data.length; i < len; i++){
if((city_data[i].associate.indexOf(city_associate) != -1 || city_associate == ‘‘)
&& (city_data[i].productType.indexOf(city_type) != -1 || city_type == ‘‘)){
if (city_data[i].pinyin.indexOf(res_keys) == 0) {
if(res_item.length >= options.search_limit){ break; }
res_item.push(‘<li data-name="‘+city_data[i].name+‘"><a>‘+city_data[i].name+‘(‘+city_data[i].pinyin.replace(new RegExp("^"+res_keys, "g"), function($1){
return ‘<span class="ul-destination-keys">‘+ $1 +‘</span>‘;
})+‘)</a></li>‘);
//<span class="ul-destination-count">约‘+city_data[i].quantity+‘条线路</span>
} else if (city_data[i].name.indexOf(res_keys) == 0) {
if(res_item.length >= options.search_limit){ break; }
res_item.push(‘<li data-name="‘+city_data[i].name+‘"><a>‘+city_data[i].name.replace(new RegExp("^"+res_keys, "g"), function($1){
return ‘<span class="ul-destination-keys">‘+ $1 +‘</span>‘;
})+‘(‘+city_data[i].pinyin+‘)</a></li>‘);
//<span class="ul-destination-count">约‘+city_data[i].quantity+‘条线路</span>
}
}
}
res.push(res_item.join(‘‘));
res.push(‘</ul>‘);
if(res_item.length){
if(res_keys != ‘‘){
box.html(res.join(‘‘)).find(‘.ul-destination-list‘).find(‘a‘).click(function(){
options.search_callback($(this));
box.hide();
});
}else{
this.bindClick(options, box);
}
} else {
box.html(‘<p class="ul-destination-tips">亲，暂时无搜索结果</p>‘);
}
},
bindClick: function(options){
var aCityItems = methods.createCityItems(options),
box = $(‘#‘+options.ID);
if(aCityItems.length > 1){
box.html(‘<div class="ul-destination-hot">‘+methods.createDestinationTitle(options) + aCityItems.join(‘‘) + ‘</div>‘)
// close
.find(".ul-destination-close").click(function(){
box.hide();
}).end()
// city callback
.find(".ul-destination-item a").click(function(){
options.city_callback($(this));
box.hide();
});
}else{
box.html(‘<p class="ul-destination-tips">亲，暂时无搜索结果</p>‘);
}
},
bindEvent: function(options, This){
var That = this;
This.click(function(){
var box = $(‘#‘+options.ID);
if(!box.length){
box = methods.createDestination(options);
$(‘body‘).append(box);
}else{
box.show();
}
if(This.val() == ‘‘){
That.bindClick(options);
}else{
That.searchCity(options, This);
}
box.css({
"top": This.offset().top + This.outerHeight(),
"left": This.offset().left
});
return false;
}).keyup(function(){
if(This.val() == ‘‘){
That.bindClick(options);
}else{
That.searchCity(options, This);
}
});
// document close
$(document).click(function(event){
if($(event.target).attr(‘id‘) != options.ID && !$(event.target).parents(‘#‘+options.ID).length){
$(‘#‘+options.ID).hide();
}
});
}
};
$.fn.Destination = function(options){
options = $.extend($.fn.Destination.options, options || {});
return this.each(function(){
methods.init.call($(this), options);
});
};
$.fn.Destination.options = {
"ID": "J_Destination"+Math.floor(new Date().getTime()),
"city_data": [],
"type": ‘‘,
"associate": "",
"limit_city": 128,
"city_callback": function(){},
"search_callback": function(){}
};
})(jQuery);
时间： 2024-11-25 21:13:47