【回忆1314】回忆之城市搜索

直接看效果点这里

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: [email protected]
 * @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: [email protected]
 * @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);
时间： 2024-10-28 22:43:59

【回忆1314】回忆之城市搜索的相关文章

【回忆1314】回忆之目的地搜索

直接看效果点这里 HTML <!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="utf-8"> <title> 目的地搜索 </title> <link rel="stylesheet" href="ui-destination.css"> <style> .city,

【回忆1314】回忆之浮窗

直接看效果点这里 HTML <!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="utf-8"> <title> 浮窗 </title> <style> * { margin: 0; padding: 0; } .staff { width: 1200px; margin: 0 auto; height: 800px; l

【回忆1314】回忆之星星评分

直接看效果点这里 HTML <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title> 星星评分 </title> <link rel="stylesheet" href="star.css"/> </head> <body> <ul

【回忆1314】抽奖之大富翁

直接看效果点这里 <!doctype html> <html> <head> <meta charset="UTF-8"> <title> 大富翁 </title> <style> ul {list-style: none; } .lottery { position: relative; width: 184px; height: 184px; line-height: 58px; text-alig

【回忆1314】回忆之日历

直接看效果点这里 HTML <!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="utf-8"> <title> 简易多栏日历 </title> <link rel="stylesheet" href="calendar.css"> </head> <body>

【回忆1314】回忆之横竖滑动门

直接看效果点这里 HTML <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title> 横竖滑动门 </title> <link rel="stylesheet" href="sliding-door.css"/> </head> <body&g

【回忆1314】回忆之分页

直接看效果点这里 HTML <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>分页插件</title> <link rel="stylesheet" href="page.min.css"/> </head> <body> <

【回忆1314】鼠标离开方向检测

直接看效果点这里 <html> <head>鼠标离开方向检测</head> <body> <div id="msg">鼠标放到框上,然后移开.</div> <div id="wrap" style="width:200px; height: 100px; line-height:30px; margin: 100px auto; text-align: center; borde

【回忆1314】回忆之placeholder

直接看效果点这里 HTML <!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="utf-8"> <title> Placeholder </title> </head> <body> <input class="J_Placeholder" type="text"