• 回忆之城市搜索


    直接看效果点这里

    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>
    View Code

    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; }
    View Code

    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);
  • 相关阅读:
    [转] 蓝牙RSSI计算距离
    [转] 人工智能之机器学习路线图
    css3兼容在线处理
    a标签实现下载
    loading图标制作
    mongodb可视化工具
    title上面的图标怎么更改
    阿里云上传下载文件
    mongodb备份恢复
    RESTful
  • 原文地址:https://www.cnblogs.com/jununx/p/4472912.html
走看看 - 开发者的网上家园