• 回忆之目的地搜索


    直接看效果点这里

    HTML

    <!DOCTYPE html>
    <html>
    <head lang="zh-CN">
        <meta charset="utf-8">
        <title> 目的地搜索 </title>
        <link rel="stylesheet" href="ui-destination.css">
        <style>
            .city, .type { overflow: hidden; }
            .city li, .type li { float: left; padding: 0 10px; margin: 0 5px; display: inline; background-color: #f60; cursor: pointer; color: #fff; }
        </style>
    </head>
    <body>
    
    <input class="test" type="text"/>
    <input class="test" type="text"/>
    
    
    <h2>选择类型</h2>
    <ul class="type">
        <li data-type="">空:全国</li>
        <li data-type="1">1:机位</li>
        <li data-type="2">2:出发地参团</li>
        <li data-type="3">3:目的地参团</li>
        <li data-type="4">4:自由行</li>
    </ul>
    
    <h2>选择城市</h2>
    <ul class="city">
        <li data-city="">空:全国</li>
        <li data-city="北京">北京</li>
        <li data-city="上海">上海</li>
        <li data-city="广州">广州</li>
        <li data-city="重庆">重庆</li>
        <li data-city="四川">四川</li>
    </ul>
    
    <h2>选择的值</h2>
    <input class="selected" type="text" value=""/>
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <script src="jquery.ui-destination.js"></script>
    <script>
        // data
    var DESTINATION_DATA = [{"keyType":2,"name":"西欧","quantity":555,"pinyin":"xiou","productType":"2","associate":"北京,上海,沈阳,西安,天津,乌鲁木齐,广州,武汉,青岛"},{"keyType":2,"name":"法国","quantity":417,"pinyin":"faguo","productType":"2","associate":"北京,沈阳,上海,西安,天津,乌鲁木齐,广州,武汉,青岛"},{"keyType":2,"name":"瑞士","quantity":407,"pinyin":"ruishi","productType":"2","associate":"北京,沈阳,上海,西安,天津,乌鲁木齐,广州,武汉,青岛"},{"keyType":2,"name":"意大利","quantity":375,"pinyin":"yidali","productType":"2","associate":"北京,沈阳,上海,西安,天津,乌鲁木齐,广州,武汉,青岛"},{"keyType":2,"name":"德国","quantity":330,"pinyin":"deguo","productType":"2","associate":"北京,上海,沈阳,西安,天津,乌鲁木齐,广州,武汉,青岛"},{"keyType":2,"name":"泰国","quantity":295,"pinyin":"taiguo","productType":"2,4","associate":"北京,昆明,天津,上海"},{"keyType":2,"name":"东欧","quantity":234,"pinyin":"dongou","productType":"2","associate":"北京,西安,上海,沈阳,乌鲁木齐,天津,广州,武汉"},{"keyType":3,"name":"海岛","quantity":227,"pinyin":"haidao","productType":"2,3,4","associate":"北京,上海,天津,西安,青岛"},{"keyType":2,"name":"普吉岛","quantity":209,"pinyin":"pujidao","productType":"2","associate":"北京,上海"},{"keyType":2,"name":"日本","quantity":207,"pinyin":"riben","productType":"2","associate":"上海,北京,武汉,长沙,天津,乌鲁木齐,西安"},{"keyType":1,"name":"曼谷","quantity":201,"pinyin":"mangu","productType":"2","associate":"北京,合肥,南京,天津,昆明"},{"keyType":2,"name":"洛杉矶","quantity":187,"pinyin":"luoshanji","productType":"2","associate":"北京,武汉,天津,西安,青岛"},{"keyType":2,"name":"东京","quantity":183,"pinyin":"dongjing","productType":"2","associate":"北京,武汉,长沙,天津,乌鲁木齐,西安"},{"keyType":1,"name":"华东","quantity":180,"pinyin":"huadong","productType":"2","associate":"北京"},{"keyType":2,"name":"拉斯维加斯","quantity":176,"pinyin":"lasiweijiasi","productType":"2","associate":"北京,天津,西安,武汉,青岛"}];
    
        $('.test').Destination({
            "ID": "J_Destination",
            "city_data": DESTINATION_DATA,
            "search_limit": 10
        });
    
        // 切换城市
        $('.city li').click(function(){
            $('.test').Destination.options.associate = $(this).data('city');
            $('.selected').val('城市:'+$('.test').Destination.options.associate+',类型:'+$('.test').Destination.options.type);
        });
    
        // 切换类型
        $('.type li').click(function(){
            $('.test').Destination.options.type = $(this).data('type');
            $('.selected').val('城市:'+$('.test').Destination.options.associate+',类型:'+$('.test').Destination.options.type);
        });
    
    
    
    
    </script>
    </body>
    </html>
    View Code

    CSS

    /**
     * @description: 热门搜索+检索
     * @author: jununx@gmail.com
     * @update: 2014/11/28
     */
    
    /*reset*/
    h3, dl, dt, dd, ul, li, p { margin: 0; padding: 0; }
    li { list-style: none; }
    a { text-decoration: none; color: #333; cursor: pointer; }
    a:hover,.ul-destination-keys { color: #f60; }
    
    /*ul-destination*/
    .ul-destination { position: absolute; z-index: 9999; width: 420px; border: 1px #999 solid; background-color: #fff; color: #333; font: 12px/1.5 'simsun', arial, 'sans-serif'; }
    .ul-destination-title { position: relative; height: 20px; line-height: 20px; color: #f60; padding: 5px 5px 5px 10px; font-size: 12px; border-bottom: 1px #eee solid;  }
    .ul-destination-close { position: absolute; top: 5px; right: 5px; padding: 0 2px 0 3px; font-size: 14px; color: #bbb; }
    .ul-destination-item { padding: 10px 10px 0; line-height: 24px; overflow: hidden; }
    .ul-destination-item dt { line-height: 18px; font-weight: bold; }
    .ul-destination-item dd { margin-bottom: 10px; overflow: hidden; }
    .ul-destination-item a { float: left; margin-right: 12px; white-space: nowrap; word-break: break-all; }
    .ul-destination-list { line-height: 26px; }
    .ul-destination-list a { position: relative; display: block; overflow: hidden; height: 26px; padding: 0 10px; }
    .ul-destination-list a:hover,.ul-destination-list .active a { background-color: #7ba5de; color: #fff; }
    .ul-destination-count { position: absolute; top: 0; right: 10px; }
    .ul-destination-tips { text-align: center; color: #999; margin: 15px 0; }
    View Code

    JS

    /**
     * @description: 目的地
     * @author: jununx@gmail.com
     * @update: 2014/11/30
     *
     * @param   {string}      ID              给这个控件一个ID,默认自动生成,重绘避免重复生成,如果本页出现多次该控件最好填写不同的ID
     * @param   {json}        city_data       城市列表数据
     * @param   {id/number}   type            获取这个ID的val,产品类型,1机位、2出发地参团、3目的地参团、4自由行
     * @param   {id/string}   associate       获取这个ID的val,关联词,默认空
     * @param   {number}      limit_city      全部城市显示长度控制,默认128
     * @param   {json}        city_callback   点击城市的回调函数,参数返回当前对象
     * @param   {json}        search_callback 点击搜索结果的回调函数,参数返回当前对象
     */
    
    ;(function($){
    
        var methods = {
            init: function(options){
                methods.bindEvent(options, this);
            },
            createDestination: function(options){
                var box = $('<div id="'+options.ID+'" class="ul-destination"></div>');
                return box;
            },
            createDestinationTitle: function(){
                return '<h3 class="ul-destination-title">推荐<a class="ul-destination-close">×</a></h3>';
            },
            createCityItems: function(options){
                var city_data = options.city_data,
                    oCity_type = $('#'+options.type),
                    city_type = oCity_type.length ? oCity_type.val() : options.type,
                    oCity_associate = $('#'+options.associate),
                    city_associate = oCity_associate.length ? oCity_associate.val() : options.associate,
                    res = ['<dl class="ul-destination-item">'],
                    city_group = {},
                    keyTypeText = ["", "国内", "国际", "主题"];
    
                for (var i = 0, len = city_data.length; i < len; i++){
                    if((city_data[i].productType.indexOf(city_type) != -1 || city_type == '')
                        && (city_data[i].associate.indexOf(city_associate) != -1 || city_associate == '')) {
    
                        if(typeof city_group[city_data[i].keyType] == 'undefined'){
                            city_group[city_data[i].keyType] = [];
                        }
                        city_group[city_data[i].keyType].push(city_data[i]);
    
                    }
                }
    
                for (var n in city_group){
                    res.push('<dt>'+keyTypeText[n]+'</dt><dd>');
                    for (var m = 0, limit = 0, lenM = city_group[n].length; m < lenM; m++){
                        limit += this.getStrLen(city_group[n][m].name) + 2;
                        if(limit > options.limit_city) {
                            break;
                        }
                        res.push('<a>' + city_group[n][m].name + '</a>');
                    }
                    res.push('</dd>');
                }
    
                return res;
            },
            getStrLen: function (target){
                var s = target.replace(/[^x00-xff]/g, "**");
                return s.length;
            },
            searchCity: function(options, This){
                var city_data = options.city_data,
                    oCity_type = $('#'+options.type),
                    city_type = oCity_type.length ? oCity_type.val() : options.type,
                    oCity_associate = $('#'+options.associate),
                    city_associate = oCity_associate.length ? oCity_associate.val() : options.associate,
                    box = $('#'+options.ID),
                    res = ['<ul class="ul-destination-list">'],
                    res_item = [],
                    res_keys = This.val();
                for(var i = 0, len = city_data.length; i < len; i++){
                    if((city_data[i].associate.indexOf(city_associate) != -1 || city_associate == '')
                        && (city_data[i].productType.indexOf(city_type) != -1 || city_type == '')){
    
                        if (city_data[i].pinyin.indexOf(res_keys) == 0) {
                            if(res_item.length >= options.search_limit){ break; }
                            res_item.push('<li data-name="'+city_data[i].name+'"><a>'+city_data[i].name+'('+city_data[i].pinyin.replace(new RegExp("^"+res_keys, "g"), function($1){
                                return '<span class="ul-destination-keys">'+ $1 +'</span>';
                            })+')</a></li>');
                            //<span class="ul-destination-count">约'+city_data[i].quantity+'条线路</span>
                        } else if (city_data[i].name.indexOf(res_keys) == 0) {
                            if(res_item.length >= options.search_limit){ break; }
                            res_item.push('<li data-name="'+city_data[i].name+'"><a>'+city_data[i].name.replace(new RegExp("^"+res_keys, "g"), function($1){
                                return '<span class="ul-destination-keys">'+ $1 +'</span>';
                            })+'('+city_data[i].pinyin+')</a></li>');
                            //<span class="ul-destination-count">约'+city_data[i].quantity+'条线路</span>
                        }
    
                    }
                }
                res.push(res_item.join(''));
                res.push('</ul>');
    
                if(res_item.length){
                    if(res_keys != ''){
                        box.html(res.join('')).find('.ul-destination-list').find('a').click(function(){
                            options.search_callback($(this));
                            box.hide();
                        });
                    }else{
                        this.bindClick(options, box);
                    }
                } else {
                    box.html('<p class="ul-destination-tips">亲,暂时无搜索结果</p>');
                }
            },
            bindClick: function(options){
                var aCityItems = methods.createCityItems(options),
                    box = $('#'+options.ID);
                if(aCityItems.length > 1){
                    box.html('<div class="ul-destination-hot">'+methods.createDestinationTitle(options) + aCityItems.join('') + '</div>')
                        // close
                        .find(".ul-destination-close").click(function(){
                            box.hide();
                        }).end()
                        // city callback
                        .find(".ul-destination-item a").click(function(){
                            options.city_callback($(this));
                            box.hide();
                        });
                }else{
                    box.html('<p class="ul-destination-tips">亲,暂时无搜索结果</p>');
                }
            },
            bindEvent: function(options, This){
                var That = this;
                This.click(function(){
                    var box = $('#'+options.ID);
                    if(!box.length){
                        box = methods.createDestination(options);
                        $('body').append(box);
                    }else{
                        box.show();
                    }
                    if(This.val() == ''){
                        That.bindClick(options);
                    }else{
                        That.searchCity(options, This);
                    }
                    box.css({
                        "top": This.offset().top + This.outerHeight(),
                        "left": This.offset().left
                    });
                    return false;
                }).keyup(function(){
                    if(This.val() == ''){
                        That.bindClick(options);
                    }else{
                        That.searchCity(options, This);
                    }
                });
    
                // document close
                $(document).click(function(event){
                    if($(event.target).attr('id') != options.ID && !$(event.target).parents('#'+options.ID).length){
                        $('#'+options.ID).hide();
                    }
                });
            }
        };
    
        $.fn.Destination = function(options){
            options = $.extend($.fn.Destination.options, options || {});
            return this.each(function(){
                methods.init.call($(this), options);
            });
        };
    
        $.fn.Destination.options = {
            "ID": "J_Destination"+Math.floor(new Date().getTime()),
            "city_data": [],
            "type": '',
            "associate": "",
            "limit_city": 128,
            "city_callback": function(){},
            "search_callback": function(){}
        };
    
    })(jQuery);
  • 相关阅读:
    8.31前端 jQuery
    8.30前端jQuery和数据结构知识
    8.29 jQuery
    8.28 jQuery
    8.27 jQuery
    8.26 js
    chrome开发工具指南(十二)
    chrome开发工具指南(十一)
    chrome开发工具指南(十)
    chrome开发工具指南(九)
  • 原文地址:https://www.cnblogs.com/jununx/p/4472913.html
走看看 - 开发者的网上家园