直接看效果点这里
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: jununx@gmail.com * @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: jununx@gmail.com * @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);