直接看效果点这里
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);