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 = $(' '); return res; }, createDepartureTitle: function(){ return '热门出发城市×
'; }, createHotCity: function(options){ var res = [' '], city_hot = options.city_hot; for (var i = 0, len = city_hot.length; i < len; i++) { if(city_hot[i].name == '全国'){ res.push(' '+ city_hot[i].name +''); }else { res.push(' '+ city_hot[i].name +''); } } res.push(' '); return res.join(''); }, createCityItems: function(options){ var res = [' '], 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(' '+ city_data[i].name +''); } else if (/^[hijkl]/.test(city_data[i].code.toLowerCase())){ city_group['H-L'].push(' '+ city_data[i].name +''); } else if (/^[mnopqrst]/.test(city_data[i].code.toLowerCase())){ city_group['M-T'].push(' '+ city_data[i].name +''); } else if (/^[wxyz]/.test(city_data[i].code.toLowerCase())){ city_group['W-Z'].push(' '+ city_data[i].name +''); } } for (var n in city_group) { if(city_group[n].length){ res.push(' - '+n+'
'); res.push(' - '+city_group[n].join('')+'
'); res.push('
'); } } res.push(' '); return res.join(''); }, createSearch: function(){ var res = [' ', ' ', ' ', ' ',' ',' ']; 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(''+ searchResultCity.join('') +'').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);