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