本站源码全部测试通过,配有前台及后台演示图,绿色安全,希望能对大家有所帮助!
  • 首 页
  • VPS/云主机
  • 基于mui酒店名称首字母快速查找代码
    时间:2019-12-28 11:56 来源:开源之家 作者:开源之家测试提供 下载:177 次
    • 源码说明:本站源码全部经过测试,配有前台及后台管理界面演示图,去除后门,绿色安全,希望对大家学习研究能有所帮助!
    • 源码类型:特效源码
    • 源码大小:243 KB
    • 运行环境:HTML
    • 下载次数:177 次
    • 推荐VPS:
    • 提取密码/源码编号:
    • 本地下载
    • 本地下载
    • 》网盘下载,每日更新

    基于mui酒店名称首字母快速查找代码

    特效描述:基于mui 酒店名称首字母 快速查找代码,基于mui.js制作酒店列表点击右侧字母快速定位查找到酒店名称,这是一款实用的搜索检索字母快速定位查询结果代码。

    代码结构

    1. 引入CSS

    1
    2
    <link href="css/mui.min.css" rel="stylesheet" />
    <link href="css/mui.indexedlist.css" rel="stylesheet" />

    2. 引入JS

    1
    2
    <script src="js/mui.min.js"></script>
    <script src="js/mui.indexedlist.js"></script>

    3. HTML代码

    <header class="mui-bar mui-bar-nav">
        <h1 class="mui-title">酒店列表</h1>
    </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">阿克苏酒店</li>
                    <li data-value="BPL" data-tags="ALaShanKou" class="mui-table-view-cell mui-indexed-list-item">阿拉山口酒店</li>
                    <li data-value="AAT" data-tags="ALeTai" class="mui-table-view-cell mui-indexed-list-item">阿勒泰酒店</li>
                    <li data-value="NGQ" data-tags="ALiKunSha" class="mui-table-view-cell mui-indexed-list-item">阿里昆莎酒店</li>
                    <li data-value="AQG" data-tags="AnQingTianZhuShan" class="mui-table-view-cell mui-indexed-list-item">安庆天柱山酒店</li>
                    <li data-value="MFM" data-tags="AoMenGuoJi" class="mui-table-view-cell mui-indexed-list-item">澳门国际酒店</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">保山酒店</li>
                    <li data-value="BAV" data-tags="BaoTou" class="mui-table-view-cell mui-indexed-list-item">包头酒店</li>
                    <li data-value="BHY" data-tags="BeiHaiFuCheng" class="mui-table-view-cell mui-indexed-list-item">北海福成酒店</li>
                    <li data-value="NAY" data-tags="BeiJingNanYuan" class="mui-table-view-cell mui-indexed-list-item">北京南苑酒店</li>
                    <li data-value="PEK" data-tags="BeiJingShouDuGuoJi" class="mui-table-view-cell mui-indexed-list-item">北京首都国际酒店</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">长白山酒店</li>
                    <li data-value="CGQ" data-tags="ChangChunLongJiaGuoJi" class="mui-table-view-cell mui-indexed-list-item">长春龙嘉国际酒店</li>
                    <li data-value="CGD" data-tags="ChangDeTaoHuaYuan" class="mui-table-view-cell mui-indexed-list-item">常德桃花源酒店</li>
                    <li data-value="BPX" data-tags="ChangDuBangDa" class="mui-table-view-cell mui-indexed-list-item">昌都邦达酒店</li>
                    <li data-value="CSX" data-tags="ChangShaHuangHuaGuoJi" class="mui-table-view-cell mui-indexed-list-item">长沙黄花国际酒店</li>
                    <li data-value="CIH" data-tags="ChangZhiWangCun" class="mui-table-view-cell mui-indexed-list-item">长治王村酒店</li>
                    <li data-value="CZX" data-tags="ChangZhouBenNiu" class="mui-table-view-cell mui-indexed-list-item">常州奔牛酒店</li>
                    <li data-value="CTU" data-tags="ChengDuShuangLiuGuoJi" class="mui-table-view-cell mui-indexed-list-item">成都双流国际酒店</li>
                    <li data-value="CIF" data-tags="ChiFeng" class="mui-table-view-cell mui-indexed-list-item">赤峰酒店</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">大理酒店</li>
                    <li data-value="DLC" data-tags="DaLianZhouShuiZiGuoJi" class="mui-table-view-cell mui-indexed-list-item">大连周水子国际酒店</li>
                    <li data-value="DQA" data-tags="DaQingSaErTu" class="mui-table-view-cell mui-indexed-list-item">大庆萨尔图酒店</li>
                    <li data-value="DAT" data-tags="DaTongDongWangZhuang" class="mui-table-view-cell mui-indexed-list-item">大同东王庄酒店</li>
                    <li data-value="DAX" data-tags="DaZhouHeShi" class="mui-table-view-cell mui-indexed-list-item">达州河市酒店</li>
                    <li data-value="DDG" data-tags="DanDongLangTou" class="mui-table-view-cell mui-indexed-list-item">丹东浪头酒店</li>
                    <li data-value="LUM" data-tags="DeHongMangShi" class="mui-table-view-cell mui-indexed-list-item">德宏芒市酒店</li>
                    <li data-value="DIG" data-tags="DiQingXiangGeLiLa" class="mui-table-view-cell mui-indexed-list-item">迪庆香格里拉酒店</li>
                    <li data-value="DOY" data-tags="DongYing" class="mui-table-view-cell mui-indexed-list-item">东营酒店</li>
                    <li data-value="DNH" data-tags="DunHuang" class="mui-table-view-cell mui-indexed-list-item">敦煌酒店</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">鄂尔多斯酒店</li>
                    <li data-value="ENH" data-tags="EnShiXuJiaPing" class="mui-table-view-cell mui-indexed-list-item">恩施许家坪酒店</li>
                    <li data-value="ERL" data-tags="ErLianHaoTeSaiWuSuGuoJi" class="mui-table-view-cell mui-indexed-list-item">二连浩特赛乌苏国际酒店</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">阜阳西关酒店</li>
                    <li data-value="FOC" data-tags="FuZhouChangLeGuoJi" class="mui-table-view-cell mui-indexed-list-item">福州长乐国际酒店</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">赣州黄金酒店</li>
                    <li data-value="GOQ" data-tags="GeErMu" class="mui-table-view-cell mui-indexed-list-item">格尔木酒店</li>
                    <li data-value="GYU" data-tags="GuYuanLiuPanShan" class="mui-table-view-cell mui-indexed-list-item">固原六盘山酒店</li>
                    <li data-value="GYS" data-tags="GuangYuanPanLong" class="mui-table-view-cell mui-indexed-list-item">广元盘龙酒店</li>
                    <li data-value="CAN" data-tags="GuangZhouBaiYunGuoJi" class="mui-table-view-cell mui-indexed-list-item">广州白云国际酒店</li>
                    <li data-value="KWL" data-tags="GuiLinLiangJiangGuoJi" class="mui-table-view-cell mui-indexed-list-item">桂林两江国际酒店</li>
                    <li data-value="KWE" data-tags="GuiYangLongDongBaoGuoJi" class="mui-table-view-cell mui-indexed-list-item">贵阳龙洞堡国际酒店</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">哈尔滨太平国际酒店</li>
                    <li data-value="HMI" data-tags="HaMi" class="mui-table-view-cell mui-indexed-list-item">哈密酒店</li>
                    <li data-value="HAK" data-tags="HaiKouMeiLanGuoJi" class="mui-table-view-cell mui-indexed-list-item">海口美兰国际酒店</li>
                    <li data-value="HLD" data-tags="HaiLaErDongShanGuoJi" class="mui-table-view-cell mui-indexed-list-item">海拉尔东山国际酒店</li>
                    <li data-value="HDG" data-tags="HanDan" class="mui-table-view-cell mui-indexed-list-item">邯郸酒店</li>
                    <li data-value="HZG" data-tags="HanZhong" class="mui-table-view-cell mui-indexed-list-item">汉中酒店</li>
                    <li data-value="HGH" data-tags="HangZhouXiaoShanGuoJi" class="mui-table-view-cell mui-indexed-list-item">杭州萧山国际酒店</li>
                    <li data-value="HFE" data-tags="HeFeiLuoGangGuoJi" class="mui-table-view-cell mui-indexed-list-item">合肥骆岗国际酒店</li>
                    <li data-value="HTN" data-tags="HeTian" class="mui-table-view-cell mui-indexed-list-item">和田酒店</li>
                    <li data-value="HEK" data-tags="HeiHe" class="mui-table-view-cell mui-indexed-list-item">黑河酒店</li>
                    <li data-value="HET" data-tags="HuHeHaoTeBaiTaGuoJi" class="mui-table-view-cell mui-indexed-list-item">呼和浩特白塔国际酒店</li>
                    <li data-value="HIA" data-tags="HuaiAnLianShui" class="mui-table-view-cell mui-indexed-list-item">淮安涟水酒店</li>
                    <li data-value="TXN" data-tags="HuangShanTunXiGuoJi" class="mui-table-view-cell mui-indexed-list-item">黄山屯溪国际酒店</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">济南遥墙国际酒店</li>
                    <li data-value="JNG" data-tags="JiNingQuFu" class="mui-table-view-cell mui-indexed-list-item">济宁曲阜酒店</li>
                    <li data-value="JXA" data-tags="JiXiXingKaiHu" class="mui-table-view-cell mui-indexed-list-item">鸡西兴凯湖酒店</li>
                    <li data-value="JMU" data-tags="JiaMuSiDongJiao" class="mui-table-view-cell mui-indexed-list-item">佳木斯东郊酒店</li>
                    <li data-value="JGN" data-tags="JiaYuGuan" class="mui-table-view-cell mui-indexed-list-item">嘉峪关酒店</li>
                    <li data-value="JNZ" data-tags="JinZhouXiaoLingZi" class="mui-table-view-cell mui-indexed-list-item">锦州小岭子酒店</li>
                    <li data-value="JDZ" data-tags="JingDeZhen" class="mui-table-view-cell mui-indexed-list-item">景德镇酒店</li>
                    <li data-value="JGS" data-tags="JingGangShan" class="mui-table-view-cell mui-indexed-list-item">井冈山酒店</li>
                    <li data-value="JIU" data-tags="JiuJiangLuShan" class="mui-table-view-cell mui-indexed-list-item">九江庐山酒店</li>
                    <li data-value="JZH" data-tags="JiuZhaiHuangLong" class="mui-table-view-cell mui-indexed-list-item">九寨黄龙酒店</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">喀什酒店</li>
                    <li data-value="KRY" data-tags="KeLaMaYi" class="mui-table-view-cell mui-indexed-list-item">克拉玛依酒店</li>
                    <li data-value="KCA" data-tags="KuCheGuiZi" class="mui-table-view-cell mui-indexed-list-item">库车龟兹酒店</li>
                    <li data-value="KRL" data-tags="KuErLe" class="mui-table-view-cell mui-indexed-list-item">库尔勒酒店</li>
                    <li data-value="KMG" data-tags="KunMingWuJiaBaGuoJi" class="mui-table-view-cell mui-indexed-list-item">昆明巫家坝国际酒店</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">拉萨贡嘎酒店</li>
                    <li data-value="LHW" data-tags="LanZhouZhongChuan" class="mui-table-view-cell mui-indexed-list-item">兰州中川酒店</li>
                    <li data-value="LJG" data-tags="LiJiangSanYi" class="mui-table-view-cell mui-indexed-list-item">丽江三义酒店</li>
                    <li data-value="HZH" data-tags="LiPing" class="mui-table-view-cell mui-indexed-list-item">黎平酒店</li>
                    <li data-value="LYG" data-tags="LianYunGangBaiTaBu" class="mui-table-view-cell mui-indexed-list-item">连云港白塔埠酒店</li>
                    <li data-value="LNJ" data-tags="LinCang" class="mui-table-view-cell mui-indexed-list-item">临沧酒店</li>
                    <li data-value="LYI" data-tags="LinYi" class="mui-table-view-cell mui-indexed-list-item">临沂酒店</li>
                    <li data-value="LZY" data-tags="LinZhiMiLin" class="mui-table-view-cell mui-indexed-list-item">林芝米林酒店</li>
                    <li data-value="LZH" data-tags="LiuZhouBaiLian" class="mui-table-view-cell mui-indexed-list-item">柳州白莲酒店</li>
                    <li data-value="LCX" data-tags="LongYanGuanZhiShan" class="mui-table-view-cell mui-indexed-list-item"&
    

    郑重声明:
    本站资源均由高价购买、会员分享,全部经过测试,配有前台及后台管理界面演示图,去除后门,绿色安全,希望对大家学习研究能有所帮助!
    若您需要商业运营或用于其它商业活动,请您购买正版授权并合法使用。 我们不承担任何技术及版权问题,且不对任何资源负法律责任。
    如无法下载,联系站长索要。如有侵犯您的版权,请提交软件证书/图片地址和源码链接 我们尽快处理。

    开源之家广告栏目A
    开源之家广告栏目B
    开源之家广告栏目C
    在线客服
    客服微信

    扫一扫......加客服微信