mui搜索位置功能 带有select

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <link href="../css/mui.min.css" rel="stylesheet" />
        <style>
            html,
            body {
                height: 100%;
                overflow: hidden;
            }
            
            .mui-bar {
                -webkit-box-shadow: none;
                box-shadow: none;
            }
            
            #done.mui-disabled {
                color: gray;
            }
            
            .mui-indexed-list {
                position: relative;
                border-top: solid 1px #e3e3e3;
                border-bottom: solid 1px #e3e3e3;
                overflow: hidden;
                background-color: #fafafa;
                height: 300px;
                cursor: default;
            }
            
            .mui-indexed-list-inner {
                margin: 0px;
                padding: 0px;
                overflow-y: auto;
                border: none;
            }
            
            .mui-indexed-list-inner::-webkit-scrollbar {
                width: 0px;
                height: 0px;
                visibility: hidden;
            }
            
            .mui-indexed-list-empty-alert,
            .mui-indexed-list-inner.empty ul {
                display: none;
            }
            
            .mui-indexed-list-inner.empty .mui-indexed-list-empty-alert {
                display: block;
            }
            
            .mui-indexed-list-empty-alert {
                padding: 30px 15px;
                text-align: center;
                color: #ccc;
                padding-right: 45px;
            }
            
            .mui-ios .mui-indexed-list-inner {
                width: calc(100% + 10px);
            }
            
            .mui-indexed-list-group,
            .mui-indexed-list-item {
                padding-right: 45px;
            }
            
            .mui-ios .mui-indexed-list-group,
            .mui-ios .mui-indexed-list-item,
            .mui-ios .mui-indexed-list-empty-alert {
                padding-right: 55px;
            }
            
            .mui-indexed-list-group {
                background-color: #f7f7f7;
            }
            
            .mui-indexed-list-group {
                padding-top: 3px;
                padding-bottom: 3px;
            }
            
            .mui-indexed-list-search {
                border-bottom: solid 1px #e3e3e3;
                z-index: 15;
            }
            
            .mui-indexed-list-search.mui-search:before {
                margin-top: -10px;
            }
            
            .mui-indexed-list-search input {
                border-radius: 0px;
                margin: 0px;
                background-color: #fafafa;
            }
            
            .mui-indexed-list-bar {
                width: 23px;
                background-color: lightgrey;
                position: absolute;
                height: 100%;
                z-index: 10;
                right: 0px;
                -webkit-transition: .2s;
            }
            
            .mui-indexed-list-bar a {
                display: block;
                text-align: center;
                font-size: 11px;
                padding: 0px;
                margin: 0px;
                line-height: 15px;
                color: #aaa;
            }
            
            .mui-indexed-list-bar.active {
                background-color: rgb(200, 200, 200);
            }
            
            .mui-indexed-list-bar.active a {
                color: #333;
            }
            
            .mui-indexed-list-bar.active a.active {
                color: #007aff;
            }
            
            .mui-indexed-list-alert {
                position: absolute;
                z-index: 20;
                background-color: rgba(0, 0, 0, 0.5);
                width: 80px;
                height: 80px;
                left: 50%;
                top: 50%;
                margin-left: -40px;
                margin-top: -40px;
                border-radius: 40px;
                text-align: center;
                line-height: 80px;
                font-size: 35px;
                color: #fff;
                display: none;
                -webkit-transition: .2s;
            }
            
            .mui-indexed-list-alert.active {
                display: block;
            }
        </style>
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">选择机场</h1>
            <a id='done' class="mui-btn mui-btn-link mui-pull-right mui-btn-blue mui-disabled">完成</a>
        </header>
        <div class="mui-content">
            <div id='list' class="mui-indexed-list">
                <div class="mui-indexed-list-search mui-input-row mui-search">
                    <input type="search" class="mui-input-clear mui-indexed-list-search-input" placeholder="搜索机场">
                </div>
                <div class="mui-indexed-list-bar">
                    <a>A</a>
                    <a>B</a>
                    <a>C</a>
                    <a>D</a>
                    <a>E</a>
                    <a>F</a>
                    <a>G</a>
                    <a>H</a>
                    <a>I</a>
                    <a>J</a>
                    <a>K</a>
                    <a>L</a>
                    <a>M</a>
                    <a>N</a>
                    <a>O</a>
                    <a>P</a>
                    <a>Q</a>
                    <a>R</a>
                    <a>S</a>
                    <a>T</a>
                    <a>U</a>
                    <a>V</a>
                    <a>W</a>
                    <a>X</a>
                    <a>Y</a>
                    <a>Z</a>
                </div>
                <div class="mui-indexed-list-alert"></div>
                <div class="mui-indexed-list-inner">
                    <div class="mui-indexed-list-empty-alert">没有数据</div>
                    <ul class="mui-table-view">
                        <li data-group="A" class="mui-table-view-divider mui-indexed-list-group">A</li>
                        <li data-value="AKU" data-tags="AKeSu" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />阿克苏机场</li>
                        <li data-value="BPL" data-tags="ALaShanKou" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />阿拉山口机场</li>
                        <li data-value="AAT" data-tags="ALeTai" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />阿勒泰机场</li>
                        <li data-value="NGQ" data-tags="ALiKunSha" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />阿里昆莎机场</li>
                        <li data-value="AQG" data-tags="AnQingTianZhuShan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />安庆天柱山机场</li>
                        <li data-value="MFM" data-tags="AoMenGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />澳门国际机场</li>
                        <li data-group="B" class="mui-table-view-divider mui-indexed-list-group">B</li>
                        <li data-value="BSD" data-tags="BaoShan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />保山机场</li>
                        <li data-value="BAV" data-tags="BaoTou" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />包头机场</li>
                        <li data-value="BHY" data-tags="BeiHaiFuCheng" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />北海福成机场</li>
                        <li data-value="NAY" data-tags="BeiJingNanYuan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />北京南苑机场</li>
                        <li data-value="PEK" data-tags="BeiJingShouDuGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />北京首都国际机场</li>
                        <li data-group="C" class="mui-table-view-divider mui-indexed-list-group">C</li>
                        <li data-value="NBS" data-tags="ChangBaiShan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />长白山机场</li>
                        <li data-value="CGQ" data-tags="ChangChunLongJiaGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />长春龙嘉国际机场</li>
                        <li data-value="CGD" data-tags="ChangDeTaoHuaYuan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />常德桃花源机场</li>
                        <li data-value="BPX" data-tags="ChangDuBangDa" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />昌都邦达机场</li>
                        <li data-value="CSX" data-tags="ChangShaHuangHuaGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />长沙黄花国际机场</li>
                        <li data-value="CIH" data-tags="ChangZhiWangCun" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />长治王村机场</li>
                        <li data-value="CZX" data-tags="ChangZhouBenNiu" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />常州奔牛机场</li>
                        <li data-value="CTU" data-tags="ChengDuShuangLiuGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />成都双流国际机场</li>
                        <li data-value="CIF" data-tags="ChiFeng" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />赤峰机场</li>
                        <li data-group="D" class="mui-table-view-divider mui-indexed-list-group">D</li>
                        <li data-value="DLU" data-tags="DaLi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />大理机场</li>
                        <li data-value="DLC" data-tags="DaLianZhouShuiZiGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />大连周水子国际机场</li>
                        <li data-value="DQA" data-tags="DaQingSaErTu" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />大庆萨尔图机场</li>
                        <li data-value="DAT" data-tags="DaTongDongWangZhuang" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />大同东王庄机场</li>
                        <li data-value="DAX" data-tags="DaZhouHeShi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />达州河市机场</li>
                        <li data-value="DDG" data-tags="DanDongLangTou" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />丹东浪头机场</li>
                        <li data-value="LUM" data-tags="DeHongMangShi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />德宏芒市机场</li>
                        <li data-value="DIG" data-tags="DiQingXiangGeLiLa" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />迪庆香格里拉机场</li>
                        <li data-value="DOY" data-tags="DongYing" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />东营机场</li>
                        <li data-value="DNH" data-tags="DunHuang" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />敦煌机场</li>
                        <li data-group="E" class="mui-table-view-divider mui-indexed-list-group">E</li>
                        <li data-value="DSN" data-tags="EErDuoSi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />鄂尔多斯机场</li>
                        <li data-value="ENH" data-tags="EnShiXuJiaPing" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />恩施许家坪机场</li>
                        <li data-value="ERL" data-tags="ErLianHaoTeSaiWuSuGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />二连浩特赛乌苏国际机场</li>
                        <li data-group="F" class="mui-table-view-divider mui-indexed-list-group">F</li>
                        <li data-value="FUG" data-tags="FuYangXiGuan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />阜阳西关机场</li>
                        <li data-value="FOC" data-tags="FuZhouChangLeGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />福州长乐国际机场</li>
                        <li data-group="G" class="mui-table-view-divider mui-indexed-list-group">G</li>
                        <li data-value="KOW" data-tags="GanZhouHuangJin" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />赣州黄金机场</li>
                        <li data-value="GOQ" data-tags="GeErMu" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />格尔木机场</li>
                        <li data-value="GYU" data-tags="GuYuanLiuPanShan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />固原六盘山机场</li>
                        <li data-value="GYS" data-tags="GuangYuanPanLong" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />广元盘龙机场</li>
                        <li data-value="CAN" data-tags="GuangZhouBaiYunGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />广州白云国际机场</li>
                        <li data-value="KWL" data-tags="GuiLinLiangJiangGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />桂林两江国际机场</li>
                        <li data-value="KWE" data-tags="GuiYangLongDongBaoGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />贵阳龙洞堡国际机场</li>
                        <li data-group="H" class="mui-table-view-divider mui-indexed-list-group">H</li>
                        <li data-value="HRB" data-tags="HaErBinTaiPingGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />哈尔滨太平国际机场</li>
                        <li data-value="HMI" data-tags="HaMi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />哈密机场</li>
                        <li data-value="HAK" data-tags="HaiKouMeiLanGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />海口美兰国际机场</li>
                        <li data-value="HLD" data-tags="HaiLaErDongShanGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />海拉尔东山国际机场</li>
                        <li data-value="HDG" data-tags="HanDan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />邯郸机场</li>
                        <li data-value="HZG" data-tags="HanZhong" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />汉中机场</li>
                        <li data-value="HGH" data-tags="HangZhouXiaoShanGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />杭州萧山国际机场</li>
                        <li data-value="HFE" data-tags="HeFeiLuoGangGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />合肥骆岗国际机场</li>
                        <li data-value="HTN" data-tags="HeTian" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />和田机场</li>
                        <li data-value="HEK" data-tags="HeiHe" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />黑河机场</li>
                        <li data-value="HET" data-tags="HuHeHaoTeBaiTaGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />呼和浩特白塔国际机场</li>
                        <li data-value="HIA" data-tags="HuaiAnLianShui" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />淮安涟水机场</li>
                        <li data-value="TXN" data-tags="HuangShanTunXiGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />黄山屯溪国际机场</li>
                        <li data-group="J" class="mui-table-view-divider mui-indexed-list-group">J</li>
                        <li data-value="TNA" data-tags="JiNanYaoQiangGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />济南遥墙国际机场</li>
                        <li data-value="JNG" data-tags="JiNingQuFu" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />济宁曲阜机场</li>
                        <li data-value="JXA" data-tags="JiXiXingKaiHu" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />鸡西兴凯湖机场</li>
                        <li data-value="JMU" data-tags="JiaMuSiDongJiao" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />佳木斯东郊机场</li>
                        <li data-value="JGN" data-tags="JiaYuGuan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />嘉峪关机场</li>
                        <li data-value="JNZ" data-tags="JinZhouXiaoLingZi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />锦州小岭子机场</li>
                        <li data-value="JDZ" data-tags="JingDeZhen" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />景德镇机场</li>
                        <li data-value="JGS" data-tags="JingGangShan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />井冈山机场</li>
                        <li data-value="JIU" data-tags="JiuJiangLuShan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />九江庐山机场</li>
                        <li data-value="JZH" data-tags="JiuZhaiHuangLong" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />九寨黄龙机场</li>
                        <li data-group="K" class="mui-table-view-divider mui-indexed-list-group">K</li>
                        <li data-value="KHG" data-tags="KaShi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />喀什机场</li>
                        <li data-value="KRY" data-tags="KeLaMaYi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />克拉玛依机场</li>
                        <li data-value="KCA" data-tags="KuCheGuiZi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />库车龟兹机场</li>
                        <li data-value="KRL" data-tags="KuErLe" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />库尔勒机场</li>
                        <li data-value="KMG" data-tags="KunMingWuJiaBaGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />昆明巫家坝国际机场</li>
                        <li data-group="L" class="mui-table-view-divider mui-indexed-list-group">L</li>
                        <li data-value="LXA" data-tags="LaSaGongGa" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />拉萨贡嘎机场</li>
                        <li data-value="LHW" data-tags="LanZhouZhongChuan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />兰州中川机场</li>
                        <li data-value="LJG" data-tags="LiJiangSanYi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />丽江三义机场</li>
                        <li data-value="HZH" data-tags="LiPing" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />黎平机场</li>
                        <li data-value="LYG" data-tags="LianYunGangBaiTaBu" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />连云港白塔埠机场</li>
                        <li data-value="LNJ" data-tags="LinCang" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />临沧机场</li>
                        <li data-value="LYI" data-tags="LinYi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />临沂机场</li>
                        <li data-value="LZY" data-tags="LinZhiMiLin" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />林芝米林机场</li>
                        <li data-value="LZH" data-tags="LiuZhouBaiLian" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />柳州白莲机场</li>
                        <li data-value="LCX" data-tags="LongYanGuanZhiShan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />龙岩冠豸山机场</li>
                        <li data-value="LZO" data-tags="LuZhouLanTian" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />泸州蓝田机场</li>
                        <li data-value="LYA" data-tags="LuoYangBeiJiao" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />洛阳北郊机场</li>
                        <li data-group="M" class="mui-table-view-divider mui-indexed-list-group">M</li>
                        <li data-value="NZH" data-tags="ManZhouLiXiJiao" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />满洲里西郊机场</li>
                        <li data-value="MIG" data-tags="MianYangNanJiao" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />绵阳南郊机场</li>
                        <li data-value="OHE" data-tags="MoHeGuLian" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />漠河古莲机场</li>
                        <li data-value="MDG" data-tags="MuDanJiangHaiLang" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />牡丹江海浪机场</li>
                        <li data-group="N" class="mui-table-view-divider mui-indexed-list-group">N</li>
                        <li data-value="KHN" data-tags="NanChangChangBeiGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />南昌昌北国际机场</li>
                        <li data-value="NAO" data-tags="NanChongGaoPing" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />南充高坪机场</li>
                        <li data-value="NKG" data-tags="NanJingLuKouGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />南京禄口国际机场</li>
                        <li data-value="NNG" data-tags="NanNingWuXu" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />南宁吴圩机场</li>
                        <li data-value="NTG" data-tags="NanTongXingDong" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />南通兴东机场</li>
                        <li data-value="NNY" data-tags="NanYangJiangYing" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />南阳姜营机场</li>
                        <li data-value="NGB" data-tags="NingBoLiSheGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />宁波栎社国际机场</li>
                        <li data-group="P" class="mui-table-view-divider mui-indexed-list-group">P</li>
                        <li data-value="SYM" data-tags="PuErSiMao" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />普洱思茅机场</li>
                        <li data-group="Q" class="mui-table-view-divider mui-indexed-list-group">Q</li>
                        <li data-value="NDG" data-tags="QiQiHaErSanJiaZi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />齐齐哈尔三家子机场</li>
                        <li data-value="SHP" data-tags="QinHuangDaoShanHaiGuan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />秦皇岛山海关机场</li>
                        <li data-value="TAO" data-tags="QingDaoLiuTingGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />青岛流亭国际机场</li>
                        <li data-value="JUZ" data-tags="QuZhou" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />衢州机场</li>
                        <li data-value="JJN" data-tags="QuanZhouJinJiang" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />泉州晋江机场</li>
                        <li data-group="R" class="mui-table-view-divider mui-indexed-list-group">R</li>
                        <li data-value="RKZ" data-tags="RiKaZeHePing" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />日喀则和平机场</li>
                        <li data-group="S" class="mui-table-view-divider mui-indexed-list-group">S</li>
                        <li data-value="SYX" data-tags="SanYaFengHuangGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />三亚凤凰国际机场</li>
                        <li data-value="SWA" data-tags="ShanTouWaiSha" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />汕头外砂机场</li>
                        <li data-value="SHA" data-tags="ShangHaiHongQiaoGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />上海虹桥国际机场</li>
                        <li data-value="PVG" data-tags="ShangHaiPuDongGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />上海浦东国际机场</li>
                        <li data-value="SZX" data-tags="ShenChouBaoAnGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />深圳宝安国际机场</li>
                        <li data-value="SHE" data-tags="ShenYangTaoXianGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />沈阳桃仙国际机场</li>
                        <li data-value="SJW" data-tags="ShiJiaZhuangZhengDingGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />石家庄正定国际机场</li>
                        <li data-value="WUX" data-tags="SuNanShuoFangGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />苏南硕放国际机场</li>
                        <li data-group="T" class="mui-table-view-divider mui-indexed-list-group">T</li>
                        <li data-value="TCG" data-tags="TaCheng" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />塔城机场</li>
                        <li data-value="TYN" data-tags="TaiYuanWuSuGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />太原武宿国际机场</li>
                        <li data-value="HYN" data-tags="TaiZhouLuQiao-HuangYanJiChang" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />台州路桥机场 (黄岩机场)</li>
                        <li data-value="TVS" data-tags="TangShanSanNvHe" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />唐山三女河机场</li>
                        <li data-value="TCZ" data-tags="TengChongTuoFeng" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />腾冲驼峰机场</li>
                        <li data-value="TSN" data-tags="TianJinBinHaiGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />天津滨海国际机场</li>
                        <li data-value="TGO" data-tags="TongLiao" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />通辽机场</li>
                        <li data-value="TEN" data-tags="TongRenFengHuang" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />铜仁凤凰机场</li>
                        <li data-group="W" class="mui-table-view-divider mui-indexed-list-group">W</li>
                        <li data-value="WXN" data-tags="WanZhouWuQiao" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />万州五桥机场</li>
                        <li data-value="WEF" data-tags="WeiFang" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />潍坊机场</li>
                        <li data-value="WEH" data-tags="WeiHaiDaShuiBo" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />威海大水泊机场</li>
                        <li data-value="WNH" data-tags="WenShanPuZheHei" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />文山普者黑机场</li>
                        <li data-value="WNZ" data-tags="WenZhouYongQiangGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />温州永强国际机场</li>
                        <li data-value="WUA" data-tags="WuHai" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />乌海机场</li>
                        <li data-value="WUH" data-tags="WuHanTianHeGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />武汉天河国际机场</li>
                        <li data-value="HLH" data-tags="WuLanHaoTe" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />乌兰浩特机场</li>
                        <li data-value="URC" data-tags="WuLuMuQiDiWoBaoGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />乌鲁木齐地窝堡国际机场</li>
                        <li data-value="WUS" data-tags="WuYiShan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />武夷山机场</li>
                        <li data-value="WUZ" data-tags="WuZhouChangZhouDao" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />梧州长洲岛机场</li>
                        <li data-group="X" class="mui-table-view-divider mui-indexed-list-group">X</li>
                        <li data-value="XIY" data-tags="XiAnXianYangGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />西安咸阳国际机场</li>
                        <li data-value="XIC" data-tags="XiChangQingShan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />西昌青山机场</li>
                        <li data-value="XIL" data-tags="XiLinHaoTe" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />锡林浩特机场</li>
                        <li data-value="XNN" data-tags="XiNingCaoJiaBao" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />西宁曹家堡机场</li>
                        <li data-value="JHG" data-tags="XiShuangBanNaGaSa" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />西双版纳嘎洒机场</li>
                        <li data-value="XMN" data-tags="XiaMenGaoQiGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />厦门高崎国际机场</li>
                        <li data-value="HKG" data-tags="XiangGangGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />香港国际机场</li>
                        <li data-value="XFN" data-tags="XiangYangLiuJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />襄阳刘集机场</li>
                        <li data-value="ACX" data-tags="XingYi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />兴义机场</li>
                        <li data-value="XUZ" data-tags="XuZhouGuanYin" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />徐州观音机场</li>
                        <li data-group="Y" class="mui-table-view-divider mui-indexed-list-group">Y</li>
                        <li data-value="ENY" data-tags="YanAnErShiLiBao" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />延安二十里堡机场</li>
                        <li data-value="YNZ" data-tags="YanCheng" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />盐城机场</li>
                        <li data-value="YNJ" data-tags="YanJiChaoYangChuan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />延吉朝阳川机场</li>
                        <li data-value="YNT" data-tags="YanTaiLaiShanGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />烟台莱山国际机场</li>
                        <li data-value="YBP" data-tags="YiBinCaiBa" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />宜宾菜坝机场</li>
                        <li data-value="YIH" data-tags="YiChangSanXia" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />宜昌三峡机场</li>
                        <li data-value="LDS" data-tags="YiChunLinDu" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />伊春林都机场</li>
                        <li data-value="YIN" data-tags="YiNing" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />伊宁机场</li>
                        <li data-value="YIW" data-tags="YiWu" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />义乌机场</li>
                        <li data-value="INC" data-tags="YinChuanHeDong" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />银川河东机场</li>
                        <li data-value="LLF" data-tags="YongZhouLingLing" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />永州零陵机场</li>
                        <li data-value="UYN" data-tags="YuLinYuYang" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />榆林榆阳机场</li>
                        <li data-value="YUS" data-tags="YuShuBaTang" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />玉树巴塘机场</li>
                        <li data-value="YCU" data-tags="YunChengZhangXiao" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />运城张孝机场</li>
                        <li data-group="Z" class="mui-table-view-divider mui-indexed-list-group">Z</li>
                        <li data-value="ZHA" data-tags="ZhanJiang" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />湛江机场</li>
                        <li data-value="ZAT" data-tags="ZhaoTong" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />昭通机场</li>
                        <li data-value="CGO" data-tags="ZhengZhouXinZhengGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />郑州新郑国际机场</li>
                        <li data-value="HJJ" data-tags="ZhiJiang" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />芷江机场</li>
                        <li data-value="CKG" data-tags="ZhongQingJiangBeiGuoJi" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />重庆江北国际机场</li>
                        <li data-value="ZHY" data-tags="ZhongWeiXiangShan" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />中卫香山机场</li>
                        <li data-value="HSN" data-tags="ZhouShanZhuJiaJian" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />舟山朱家尖机场</li>
                        <li data-value="ZUH" data-tags="ZhuHaiSanZao" class="mui-table-view-cell mui-indexed-list-item mui-checkbox mui-left">
                            <input type="checkbox" />珠海三灶机场</li>
                    </ul>
                </div>
            </div>
        </div>
        <script src="../js/mui.min.js"></script>
        <script src="../js/mui.indexedlist.js"></script>
        <!--<script src="../js/mui.grouplist.testdata.js"></script>-->
        <script type="text/javascript" charset="utf-8">
            mui.init();
            mui.ready(function() {
                var header = document.querySelector('header.mui-bar');
                var list = document.getElementById('list');
                var done = document.getElementById('done');
                //calc hieght
                list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
                //create
                window.indexedList = new mui.IndexedList(list);
                //done event
                done.addEventListener('tap', function() {
                    var checkboxArray = [].slice.call(list.querySelectorAll('input[type="checkbox"]'));
                    var checkedValues = [];
                    checkboxArray.forEach(function(box) {
                        if(box.checked) {
                            checkedValues.push(box.parentNode.innerText);
                        }
                    });
                    if(checkedValues.length > 0) {
                        mui.alert('你选择了: ' + checkedValues);
                    } else {
                        mui.alert('你没选择任何机场');
                    }
                }, false);
                mui('.mui-indexed-list-inner').on('change', 'input', function() {
                    var count = list.querySelectorAll('input[type="checkbox"]:checked').length;
                    var value = count ? "完成(" + count + ")" : "完成";
                    done.innerHTML = value;
                    if(count) {
                        if(done.classList.contains("mui-disabled")) {
                            done.classList.remove("mui-disabled");
                        }
                    } else {
                        if(!done.classList.contains("mui-disabled")) {
                            done.classList.add("mui-disabled");
                        }
                    }
                });
            });
        </script>
    </body>

</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,192评论 6 511
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,858评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 166,517评论 0 357
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,148评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,162评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,905评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,537评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,439评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,956评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,083评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,218评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,899评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,565评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,093评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,201评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,539评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,215评论 2 358