H5 选择城市

1、如下图：

  

2、选择开始城市(到达城市雷同)：

<div class="search-selectors-item search-selectors-item-start">
                          <div class="title">{:lang('From')}</div>
                          <input class="input" id="start_city" name="start_city" type="text" placeholder="{:lang('Where are you departing from?')}" value="">
                          <input class="input" id="start_city2" name="start_city2" type="text" placeholder="{:lang('Where are you departing from?')}" value="" style="display: none;">
                          <!-- 出发城市选择 -->
                          <div class="city-container depart-city-picker start-city-container">
                            <p class="city-container-top">
                              <span class="tabItem active-tab">{:lang('Popular cities')}</span>
                              <span class="tabItem">ABCDEFGH</span>
                              <span class="tabItem">IJKLMNOP</span>
                              <span class="tabItem">QRSTUVWXYZ</span>
                            </p>
                            <!-- 热门城市 -->
                            <div class="city-content-container active-city">
                              <div class="city-content-container-remen">
                                {foreach name="citys" item="vo" key="key"}
                                  {foreach name="vo" item="voo" key="keyy"}
                                    {if condition="$voo.city_hot eq 1"}
                                     <div class="cityItem" data-city_code="{$voo.city_code}" data-city_id="{$voo.city_id}" data-name="{$voo.city_name}">{$voo.city_name}</div>
                                    {/if}
                                  {/foreach}
                                {/foreach}
                              </div>
                            </div>
                            <!-- ABCDEFGH -->

                            <div class="city-content-container">
                              {foreach name="citys" item="vo" key="key"}
                                {if condition="preg_match('/^[a-h]$/i',$key)"}      <!-- 正则 -->
                                  <div class="city-character-content">
                                    <div class="city-character">{$key}</div>
                                    <div class="character-cities">
                                      {foreach name="vo" item="voo" key="keyy"}     
                                        <div class="cityItem" data-city_code="{$voo.city_code}" data-city_id="{$voo.city_id}" data-name="{$voo.city_name}">{$voo.city_name}</div>
                                      {/foreach}                       
                                    </div>
                                  </div>
                                {/if}
                              {/foreach}
                            </div>
                            <!-- IJKLMNOP -->
                            <div class="city-content-container">
                              {foreach name="citys" item="vo" key="key"}
                                {if condition="preg_match('/^[i-p]/i',$key)"}      <1-- 正则 -->
                                  <div class="city-character-content">
                                    <div class="city-character">{$key}</div>
                                    <div class="character-cities">
                                      {foreach name="vo" item="voo" key="keyy"}     
                                        <div class="cityItem" data-city_code="{$voo.city_code}" data-city_id="{$voo.city_id}" data-name="{$voo.city_name}">{$voo.city_name}</div>
                                      {/foreach}                       
                                    </div>
                                  </div>
                                {/if}
                              {/foreach}
                            </div>
                            <!-- QRSTUVWXYZ -->
                            <div class="city-content-container">
                              {foreach name="citys" item="vo" key="key"}
                                {if condition="preg_match('/^[q-z]/i',$key)"}    <1-- 正则 -->
                                  <div class="city-character-content">
                                    <div class="city-character">{$key}</div>
                                    <div class="character-cities">
                                      {foreach name="vo" item="voo" key="keyy"}     
                                        <div class="cityItem" data-city_code="{$voo.city_code}" data-city_id="{$voo.city_id}" data-name="{$voo.city_name}">{$voo.city_name}</div>
                                      {/foreach}                       
                                    </div>
                                  </div>
                                {/if}
                              {/foreach}
                            </div>
                          </div>
                        </div>

3、css：

  .fly-searchs .real-time-search .search-fly .search-selectors-info .search-selectors-add .search-selectors-item .city-container .city-content-container .city-character-content .character-cities .cityItem{
     33%;
    display: inline-block;
    vertical-align: top;
    padding: 5px 10px;
  }
  .fly-searchs .real-time-search .search-fly .search-selectors-info .search-selectors-add .search-selectors-item .city-container .city-content-container .cityItem{
    /* flex: 1; */
    display: inline-block;
     33%;
    vertical-align: top;
    font-size: 12px;
    cursor: pointer;
    text-align: center;
    padding: 5px 10px;
  }
  .fly-searchs .real-time-search .search-fly .search-selectors-info .search-selectors-add .search-selectors-item .city-container .city-content-container{
      padding: 10px;
      color: #333;
      font-size: 0;
      display: none;
  }
}

.fly-searchs .real-time-search .search-fly .search-selectors-info .search-selectors-add .search-selectors-item .city-container .city-container-top{
    border-bottom: 1px solid #e6e6e6;
    height: 55px;
    line-height: 55px;
    color: #333;
    font-size: 0;
}
.fly-searchs .real-time-search .search-fly .search-selectors-info .search-selectors-add .search-selectors-item .city-container .city-container-top .tabItem{
    font-size: 14px;
    height: 55px;
    line-height: 55px;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    font-size: 14px;
     25%;
    position: relative;
}
.fly-searchs .real-time-search .search-fly .search-selectors-info .search-selectors-add .search-selectors-item .city-container .city-container-top .tabItem.active-tab{
    color: #0086f6;
    font-weight: 500;
}
.fly-searchs .real-time-search .search-fly .search-selectors-info .search-selectors-add .search-selectors-item .city-container .city-container-top .tabItem.active-tab::before{
    content: "";
    position: absolute;
    bottom: -1px;
    display: block;
     100%;
    left: 0;
    border-bottom: 2px solid #0086f6;
}
.fly-searchs .real-time-search .search-fly .search-selectors-info .search-selectors-add .search-selectors-item .city-container.depart-city-picker{
    position: absolute;
    top: 65px;
    left: 0;
    z-index: 9;
}
.fly-searchs .real-time-search .search-fly .search-selectors-info .search-selectors-add .search-selectors-item .city-container .city-content-container-remen{
    /* display:flex; */
    /* flex-direction: row; */
    font-size: 0;
}
.fly-searchs .real-time-search .search-fly .search-selectors-info .search-selectors-add .search-selectors-item .city-container .city-content-container .cityItem.multi{
    font-size: 12px;
}
.fly-searchs .real-time-search .search-fly .search-selectors-info .search-selectors-add .search-selectors-item .city-container .city-content-container .city-character-content{
     100%;
    font-size: 0;
    margin-bottom: 10px;
}
.fly-searchs .real-time-search .search-fly .search-selectors-info .search-selectors-add .search-selectors-item .city-container .city-content-container .city-character-content .city-character{
     20px;
    display: inline-block;
    vertical-align: top;
    font-weight: 600;
    color: #0086f6;
    font-size: 14px;
}
.fly-searchs .real-time-search .search-fly .search-selectors-info .search-selectors-add .search-selectors-item .city-container .city-content-container .city-character-content .character-cities{
    display: inline-block;
    vertical-align: top;
    flex-wrap: wrap;
     calc(100% - 25px);
}

.fly-searchs .real-time-search .search-fly .search-selectors-info .search-selectors-add .search-selectors-item .city-container .city-content-container .city-character-content .character-cities .cityItem:hover,,
.fly-searchs .real-time-search .search-fly .search-selectors-info .search-selectors-add .search-selectors-item .city-container .city-content-container .cityItem:hover{
    background-color: rgba(0,134,246,.05);
    color: #0086f6;
}
.active-city{
    display: block !important;
}

4、js、

　　　　　//显示城市
        $('#start_city').focus(function() {
            $('.start-city-container').addClass('active-city');
        })
        $('#end_city').focus(function() {
            $('.end-city-container').addClass('active-city');
        })
        
        //隐藏城市
        $(document).click(function(event){
            var _con = $('.search-selectors-item-start');
            if(!_con.is(event.target) && _con.has(event.target).length === 0){
            $('.start-city-container').removeClass('active-city');
            }
        });
        $(document).click(function(event){
            var _con = $('.search-selectors-item-end');
            if(!_con.is(event.target) && _con.has(event.target).length === 0){
            $('.end-city-container').removeClass('active-city');
            }
        });//城市字母切换
        $(document).on('click', '.start-city-container .tabItem', function() {
            $(this).addClass('active-tab').siblings().removeClass('active-tab');
            $('.start-city-container').find('.city-content-container').eq($(this).index()).addClass('active-city').siblings().removeClass('active-city');
        })
        $(document).on('click', '.end-city-container .tabItem', function() {
            $(this).addClass('active-tab').siblings().removeClass('active-tab');
            $('.end-city-container').find('.city-content-container').eq($(this).index()).addClass('active-city').siblings().removeClass('active-city');
        })