sortList 排序列表

List.js插件 PLUGIN

List.js是非常好用的列表筛选插件,在Github上人气很高,支持单词精确检索、多词模糊检索、排序和分页。插件在当页实现筛选效果不跳转页面。目前使用的版本是v1.5.0,本框架未做任何源码修改。详细使用方法查看插件官网,或者Github

该插件不需要依赖可单独使用,当然可以借助jquery的选择器进行复杂的功能设计。

                            <script type="text/javascript" src="https://src.axui.cn/src/plugins/list/list.min.js"></script>
                        

常规使用方法

常规使用功能包括:关键字检索、排序、选择某一类、显示全部等。值得注意的是,中文排序不准确!

  • <script src="https://src.axui.cn/src/plugins/list/list.min.js" type="text/javascript"></script>
    <script type='text/javascript'>
        $(document).ready(function () {
    
            var options01 = {
                valueNames: [ 'add', 'country','click' ],
                item: 'ax-info-block',
                listClass:'travellist',
                sortClass:'ax-btn',
                searchClass:'keyword',
            };
            var travelList01 = new List('travel01', options01);
            travelList01.sort('click', { order: "asc" });
            travelList01.sort('country', { order: "asc" });
            travelList01.sort('add', { order: "asc" });
    
            $('#filter-china').click(function() {
                travelList01.filter(function(item) {
                    if (item.values().country == "China") {
                        return true;
                    } else {
                        return false;
                    }
                });
                return false;
            });
    
            $('#filter-none').click(function() {
                travelList01.filter();
                return false;
            });
            $('#travel01 .ax-val-none').click(function() {
                travelList01.search();
                return false;
            });
        });
    </script>
                            
  •                             <div class="inner" id="travel01">
    
    
                                    <div class="ax-grid ax-padding">
                                        <ul class="ax-grid-inner">
                                            <li class="ax-grid-block ax-col-9">
                                                <div class="ax-row ax-input-group">
                                                    <span class="ax-title ax-btn">关键字</span>
                                                    <div class="ax-flex-block">
                                                        <input class="keyword" placeholder="自动筛选" type="text">
                                                        <span class="ax-pos-right"><a href="##" class="ax-iconfont ax-icon-close ax-val-none"></a></span>
                                                    </div>
                                                </div>
                                            </li>
                                            <li class="ax-grid-block ax-col-3">
                                                <a href="##" class="ax-btn ax-primary ax-full" data-sort="click">点击排列</a>
                                            </li>
                                            <li class="ax-grid-block ax-col-3">
                                                <a href="##" class="ax-btn ax-primary ax-full" data-sort="country">字母排列</a>
                                            </li>
                                            <li class="ax-grid-block ax-col-3">
                                                <a href="##" class="ax-btn ax-primary ax-full" data-sort="add">中文排列</a>
                                            </li>
                                            <li class="ax-grid-block ax-col-3">
                                                <a href="##" class="ax-btn ax-primary ax-full" id="filter-china">中国事件</a>
                                            </li>
                                            <li class="ax-grid-block ax-col-3">
                                                <a href="##" class="ax-btn ax-primary ax-full" id="filter-none">显示全部</a>
                                            </li>
                                        </ul>
                                    </div>
    
                                    <div class="travellist">
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><span class="ax-ell"><i class="add">新加坡</i><i class="country">Singapore</i>,南航与英航签署联营合作协议代码共享</span></div>
                                                <span class="ax-arrow"><i class="click">26</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><span class="ax-ell"><i class="add">英国</i><i class="country">United Kingdom</i>,到英国大城小镇看“亮灯”</span></div>
                                                <span class="ax-arrow"><i class="click">45</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i class="add">英国</i><i class="country">United Kingdom</i>,英国人喝茶不再流行贵族范</a></div>
                                                <span class="ax-arrow"><i class="click">234</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i class="add">西班牙</i><i class="country">Spain</i>,西班牙斗牛与逗牛,精彩各不同</a></div>
                                                <span class="ax-arrow"><i class="click">98</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i class="add">中国</i><i class="country">China</i>,出了转广州拍照,朋友以为我去了澳洲旅游!</a></div>
                                                <span class="ax-arrow"><i class="click">59</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i class="add">古巴</i><i class="country">Cuba</i>,古巴自由行,在古巴旅游是一种怎样的体验?</a></div>
                                                <span class="ax-arrow"><i class="click">217</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i class="add">中国</i><i class="country">China</i>,道北,洛阳人熟悉又陌生的地方,如今新面貌</a></div>
                                                <span class="ax-arrow"><i class="click">348</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i class="add">日本</i><i class="country">Japan</i>,一边泡温泉一边看海景,来日本,体验独有的温泉文化 </a></div>
                                                <span class="ax-arrow"><i class="click">148</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i class="add">韩国</i><i class="country">Korea</i>,国际航线受阻,韩航空公司抢占国内航线 </a></div>
                                                <span class="ax-arrow"><i class="click">219</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i class="add">印度</i><i class="country">India</i>,巴厘岛“原始海滩”,海浪滔天,风景壮美,是绝佳的“冲浪秘境” </a></div>
                                                <span class="ax-arrow"><i class="click">91</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i class="add">印尼</i><i class="country">Indonesia</i>,印尼最活跃的活火山,导致一个王国毁灭,是最受欢迎旅游目的地 </a></div>
                                                <span class="ax-arrow"><i class="click">118</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i class="add">马尔代夫</i><i class="country">Maldives</i>,印尼最活跃的活火山,带上这篇旅游攻略,你才能知道马尔代夫有多美~ </a></div>
                                                <span class="ax-arrow"><i class="click">315</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i class="add">泰国</i><i class="country">Thailand</i>,泰国的清新小镇,被誉为泰国的小瑞士,风景优美闻名于世</a></div>
                                                <span class="ax-arrow"><i class="click">124</i>次</span>
                                            </div>
                                        </div>
                                    </div>
    
                                </div>
                            
经研究发现,筛选按钮都需要使用id表示,否则没有效果!

隐藏式筛选

在表单ax-form-input类中添加ax-fast-list类并将筛选列表放入其中即可,请观摩演示效果:

  • <script src="https://src.axui.cn/src/plugins/list/list.min.js" type="text/javascript"></script>
    <script type='text/javascript'>
        $(document).ready(function () {
    
            var options04 = {
                valueNames: [ 'add', 'country'],
                item: 'ax-info-block',
                listClass:'travellist',
                searchClass:'keyword',
            };
            var travelList04 = new List('travel04', options04);
            travelList04.on('searchComplete', function(list){
                if ( $("#travel04 input").val()=='' || list.matchingItems.length == 0) {
                    $("#travel04 input").removeClass("ax-fast-input");
                    $("#travel04").removeClass("ax-fast-active");
                    $("#travel04 .ax-fast-list").hide();
                }else{
                    $("#travel04 input").addClass("ax-fast-input");
                    $("#travel04").addClass("ax-fast-active");
                    $("#travel04 .ax-fast-list").show();
                }
            });
    
        });
    </script>
                            
  •                                 <div class="ax-form-group" id="travel04">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">超链接:</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input">
                                                    <input class="keyword" placeholder="隐藏筛选" type="text">
                                                    <span class="ax-pos-right"><a href="##" class="ax-iconfont ax-icon-close ax-val-none"></a></span>
                                                    <div class="ax-fast-list">
                                                        <div class="travellist">
                                                            <div class="ax-info-block">
                                                                <div class="ax-row">
                                                                    <div class="ax-col"><a href="##" class="ax-ell"><i class="add">新加坡</i><i class="country">Singapore</i>,南航与英航签署联营合作协议代码共享</a></div>
                                                                    <span class="ax-arrow"><i class="click">26</i>次</span>
                                                                </div>
                                                            </div>
                                                            <div class="ax-info-block">
                                                                <div class="ax-row">
                                                                    <div class="ax-col"><a href="##" class="ax-ell"><i class="add">英国</i><i class="country">United Kingdom</i>,到英国大城小镇看“亮灯”</a></div>
                                                                    <span class="ax-arrow"><i class="click">45</i>次</span>
                                                                </div>
                                                            </div>
                                                            <div class="ax-info-block">
                                                                <div class="ax-row">
                                                                    <div class="ax-col"><a href="##" class="ax-ell"><i class="add">英国</i><i class="country">United Kingdom</i>,英国人喝茶不再流行贵族范</a></div>
                                                                    <span class="ax-arrow"><i class="click">234</i>次</span>
                                                                </div>
                                                            </div>
                                                            <div class="ax-info-block">
                                                                <div class="ax-row">
                                                                    <div class="ax-col"><a href="##" class="ax-ell"><i class="add">西班牙</i><i class="country">Spain</i>,西班牙斗牛与逗牛,精彩各不同</a></div>
                                                                    <span class="ax-arrow"><i class="click">98</i>次</span>
                                                                </div>
                                                            </div>
                                                            <div class="ax-info-block">
                                                                <div class="ax-row">
                                                                    <div class="ax-col"><a href="##" class="ax-ell"><i class="add">中国</i><i class="country">China</i>,出了转广州拍照,朋友以为我去了澳洲旅游!</a></div>
                                                                    <span class="ax-arrow"><i class="click">59</i>次</span>
                                                                </div>
                                                            </div>
                                                            <div class="ax-info-block">
                                                                <div class="ax-row">
                                                                    <div class="ax-col"><a href="##" class="ax-ell"><i class="add">古巴</i><i class="country">Cuba</i>,古巴自由行,在古巴旅游是一种怎样的体验?</a></div>
                                                                    <span class="ax-arrow"><i class="click">217</i>次</span>
                                                                </div>
                                                            </div>
                                                            <div class="ax-info-block">
                                                                <div class="ax-row">
                                                                    <div class="ax-col"><a href="##" class="ax-ell"><i class="add">中国</i><i class="country">China</i>,道北,洛阳人熟悉又陌生的地方,如今新面貌</a></div>
                                                                    <span class="ax-arrow"><i class="click">348</i>次</span>
                                                                </div>
                                                            </div>
                                                            <div class="ax-info-block">
                                                                <div class="ax-row">
                                                                    <div class="ax-col"><a href="##" class="ax-ell"><i class="add">日本</i><i class="country">Japan</i>,一边泡温泉一边看海景,来日本,体验独有的温泉文化 </a></div>
                                                                    <span class="ax-arrow"><i class="click">148</i>次</span>
                                                                </div>
                                                            </div>
                                                            <div class="ax-info-block">
                                                                <div class="ax-row">
                                                                    <div class="ax-col"><a href="##" class="ax-ell"><i class="add">韩国</i><i class="country">Korea</i>,国际航线受阻,韩航空公司抢占国内航线 </a></div>
                                                                    <span class="ax-arrow"><i class="click">219</i>次</span>
                                                                </div>
                                                            </div>
                                                            <div class="ax-info-block">
                                                                <div class="ax-row">
                                                                    <div class="ax-col"><a href="##" class="ax-ell"><i class="add">印度</i><i class="country">India</i>,巴厘岛“原始海滩”,海浪滔天,风景壮美,是绝佳的“冲浪秘境” </a></div>
                                                                    <span class="ax-arrow"><i class="click">91</i>次</span>
                                                                </div>
                                                            </div>
                                                            <div class="ax-info-block">
                                                                <div class="ax-row">
                                                                    <div class="ax-col"><a href="##" class="ax-ell"><i class="add">印尼</i><i class="country">Indonesia</i>,印尼最活跃的活火山,导致一个王国毁灭,是最受欢迎旅游目的地 </a></div>
                                                                    <span class="ax-arrow"><i class="click">118</i>次</span>
                                                                </div>
                                                            </div>
                                                            <div class="ax-info-block">
                                                                <div class="ax-row">
                                                                    <div class="ax-col"><a href="##" class="ax-ell"><i class="add">马尔代夫</i><i class="country">Maldives</i>,印尼最活跃的活火山,带上这篇旅游攻略,你才能知道马尔代夫有多美~ </a></div>
                                                                    <span class="ax-arrow"><i class="click">315</i>次</span>
                                                                </div>
                                                            </div>
                                                            <div class="ax-info-block">
                                                                <div class="ax-row">
                                                                    <div class="ax-col"><a href="##" class="ax-ell"><i class="add">泰国</i><i class="country">Thailand</i>,泰国的清新小镇,被誉为泰国的小瑞士,风景优美闻名于世</a></div>
                                                                    <span class="ax-arrow"><i class="click">124</i>次</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                            

自动完成

根据该插件的特性可改造成自动完成,请观摩演示效果:

  • <script src="https://src.axui.cn/src/plugins/list/list.min.js" type="text/javascript"></script>
    <script type='text/javascript'>
        $(document).ready(function () {
    
         var options05 = {
                valueNames: [ 'add', 'country'],
                item: 'ax-info-block',
                listClass:'travellist',
                searchClass:'keyword',
            };
            var travelList05 = new List('travel05', options05);
            travelList05.on('searchComplete', function(list){
                if ( $("#travel05 input").val()=='' || list.matchingItems.length == 0) {
                    $("#travel05 input").removeClass("ax-fast-input");
                    $("#travel05").removeClass("ax-fast-active");
                    $("#travel05 .ax-fast-list").hide();
                }else{
                    $("#travel05 input").addClass("ax-fast-input");
                    $("#travel05").addClass("ax-fast-active");
                    $("#travel05 .ax-fast-list").show();
                }
            });
            $("#travel05 .ax-fast-list a").click(function () {
                $("#travel05 input").val($(this).attr("data-value"));
                $("#travel05 input").removeClass("ax-fast-input");
                $("#travel05").removeClass("ax-fast-active");
                $("#travel05 .ax-fast-list").hide();
            });
    
        });
    </script>
                            
  •                                 <div class="ax-form-group" id="travel05">
                                        <div class="ax-flex-row">
                                            <div class="ax-form-label">选出填入:</div>
                                            <div class="ax-form-con">
                                                <div class="ax-form-input">
                                                    <input class="keyword" placeholder="隐藏筛选" type="text">
                                                    <span class="ax-pos-right"><a href="##" class="ax-iconfont ax-icon-close ax-val-none"></a></span>
                                                    <div class="ax-fast-list">
                                                        <div class="travellist">
                                                            <div class="ax-info-block">
                                                                <div class="ax-row">
                                                                    <div class="ax-col"><a href="##" class="ax-ell"  data-value="新加坡"><i class="add">新加坡</i><i class="country">Singapore</i></a></div>
                                                                </div>
                                                            </div>
                                                            <div class="ax-info-block">
                                                                <div class="ax-row">
                                                                    <div class="ax-col"><a href="##" class="ax-ell"  data-value="英国"><i class="add">英国</i><i class="country">United Kingdom</i></a></div>
                                                                </div>
                                                            </div>
                                                            <div class="ax-info-block">
                                                                <div class="ax-row">
                                                                    <div class="ax-col"><a href="##" class="ax-ell"  data-value="西班牙"><i class="add">西班牙</i><i class="country">Spain</i></a></div>
                                                                </div>
                                                            </div>
                                                            <div class="ax-info-block">
                                                                <div class="ax-row">
                                                                    <div class="ax-col"><a href="##" class="ax-ell" data-value="古巴"><i class="add">古巴</i><i class="country">Cuba</i></a></div>
                                                                </div>
                                                            </div>
                                                            <div class="ax-info-block">
                                                                <div class="ax-row">
                                                                    <div class="ax-col"><a href="##" class="ax-ell" data-value="中国"><i class="add">中国</i><i class="country">China</i></a></div>
                                                                </div>
                                                            </div>
                                                            <div class="ax-info-block">
                                                                <div class="ax-row">
                                                                    <div class="ax-col"><a href="##" class="ax-ell"  data-value="日本"><i class="add">日本</i><i class="country">Japan</i></a></div>
                                                                </div>
                                                            </div>
                                                            <div class="ax-info-block">
                                                                <div class="ax-row">
                                                                    <div class="ax-col"><a href="##" class="ax-ell"  data-value="韩国"><i class="add">韩国</i><i class="country">Korea</i></a></div>
                                                                </div>
                                                            </div>
                                                            <div class="ax-info-block">
                                                                <div class="ax-row">
                                                                    <div class="ax-col"><a href="##" class="ax-ell" data-value="印度"><i class="add">印度</i><i class="country">India</i></a></div>
                                                                </div>
                                                            </div>
                                                            <div class="ax-info-block">
                                                                <div class="ax-row">
                                                                    <div class="ax-col"><a href="##" class="ax-ell" data-value="印尼"><i class="add">印尼</i><i class="country">Indonesia</i></a></div>
                                                                </div>
                                                            </div>
                                                            <div class="ax-info-block">
                                                                <div class="ax-row">
                                                                    <div class="ax-col"><a href="##" class="ax-ell" data-value="马尔代夫"><i class="add">马尔代夫</i><i class="country">Maldives</i></a></div>
                                                                </div>
                                                            </div>
                                                            <div class="ax-info-block">
                                                                <div class="ax-row">
                                                                    <div class="ax-col"><a href="##" class="ax-ell" data-value="泰国"><i class="add">泰国</i><i class="country">Thailand</i></a></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                            

分页

核心代码:pagination: true和page:4。pagination: true表示使用分页;page:4表示每页最多显示4条信息。

  • <script src="https://src.axui.cn/src/plugins/list/list.min.js" type="text/javascript"></script>
    <script type='text/javascript'>
        $(document).ready(function () {
    
            var options02 = {
                valueNames: [ 'add', 'country','click' ],
                item: 'ax-info-block',
                listClass:'travellist',
                pagination: true,
                page:4,
            };
            var travelList02 = new List('travel02', options02);
        });
    </script>
                            
  •                             <div class="inner" id="travel02">
    
                                    <div class="travellist">
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><span class="ax-ell"><i class="add">新加坡</i><i class="country">Singapore</i>,南航与英航签署联营合作协议代码共享</span></div>
                                                <span class="ax-arrow"><i class="click">26</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><span class="ax-ell"><i class="add">英国</i><i class="country">United Kingdom</i>,到英国大城小镇看“亮灯”</span></div>
                                                <span class="ax-arrow"><i class="click">45</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i class="add">英国</i><i class="country">United Kingdom</i>,英国人喝茶不再流行贵族范</a></div>
                                                <span class="ax-arrow"><i class="click">234</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i class="add">西班牙</i><i class="country">Spain</i>,西班牙斗牛与逗牛,精彩各不同</a></div>
                                                <span class="ax-arrow"><i class="click">98</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i class="add">中国</i><i class="country">China</i>,出了转广州拍照,朋友以为我去了澳洲旅游!</a></div>
                                                <span class="ax-arrow"><i class="click">59</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i class="add">古巴</i><i class="country">Cuba</i>,古巴自由行,在古巴旅游是一种怎样的体验?</a></div>
                                                <span class="ax-arrow"><i class="click">217</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i class="add">中国</i><i class="country">China</i>,道北,洛阳人熟悉又陌生的地方,如今新面貌</a></div>
                                                <span class="ax-arrow"><i class="click">348</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i class="add">日本</i><i class="country">Japan</i>,一边泡温泉一边看海景,来日本,体验独有的温泉文化 </a></div>
                                                <span class="ax-arrow"><i class="click">148</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i class="add">韩国</i><i class="country">Korea</i>,国际航线受阻,韩航空公司抢占国内航线 </a></div>
                                                <span class="ax-arrow"><i class="click">219</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i class="add">印度</i><i class="country">India</i>,巴厘岛“原始海滩”,海浪滔天,风景壮美,是绝佳的“冲浪秘境” </a></div>
                                                <span class="ax-arrow"><i class="click">91</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i class="add">印尼</i><i class="country">Indonesia</i>,印尼最活跃的活火山,导致一个王国毁灭,是最受欢迎旅游目的地 </a></div>
                                                <span class="ax-arrow"><i class="click">118</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i class="add">马尔代夫</i><i class="country">Maldives</i>,印尼最活跃的活火山,带上这篇旅游攻略,你才能知道马尔代夫有多美~ </a></div>
                                                <span class="ax-arrow"><i class="click">315</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i class="add">泰国</i><i class="country">Thailand</i>,泰国的清新小镇,被誉为泰国的小瑞士,风景优美闻名于世</a></div>
                                                <span class="ax-arrow"><i class="click">124</i>次</span>
                                            </div>
                                        </div>
                                    </div>
    
                                    <ul class="pagination ax-pagination"></ul>
    
                                </div>
                            

上页和下页

使用方法与分页类似,在隐藏分页菜单之后,只是增加了前一页和后一页按钮。

  • <script src="https://src.axui.cn/src/plugins/list/list.min.js" type="text/javascript"></script>
    <script type='text/javascript'>
        $(document).ready(function () {
            var optionsPn = {
                valueNames: [ 'add', 'country','click' ],
                item: 'ax-info-block',
                listClass:'travellist',
                pagination: true,
                page:4,
            };
            var travelListPn = new List('travelPn', optionsPn);
            $('#travelNext').on('click', function(){
                var list = $('#travelPage').find('li');
                $.each(list, function(position, element){
                    if($(element).is('[class*="active"]')){
                        $(list[position+1]).trigger('click');
                    }
                })
            });
            $('#travelPrev').on('click', function(){
                var list = $('#travelPage').find('li');
                $.each(list, function(position, element){
                    if($(element).is('[class*="active"]')){
                        $(list[position-1]).trigger('click');
                    }
                })
            });
        });
    </script>
                            
  •                             <div class="inner" id="travelPn">
    
                                    <div class="travellist">
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><span class="ax-ell"><i class="add">新加坡</i><i class="country">Singapore</i>,南航与英航签署联营合作协议代码共享</span></div>
                                                <span class="ax-arrow"><i class="click">26</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><span class="ax-ell"><i class="add">英国</i><i class="country">United Kingdom</i>,到英国大城小镇看“亮灯”</span></div>
                                                <span class="ax-arrow"><i class="click">45</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i class="add">英国</i><i class="country">United Kingdom</i>,英国人喝茶不再流行贵族范</a></div>
                                                <span class="ax-arrow"><i class="click">234</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i class="add">西班牙</i><i class="country">Spain</i>,西班牙斗牛与逗牛,精彩各不同</a></div>
                                                <span class="ax-arrow"><i class="click">98</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i class="add">中国</i><i class="country">China</i>,出了转广州拍照,朋友以为我去了澳洲旅游!</a></div>
                                                <span class="ax-arrow"><i class="click">59</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i class="add">古巴</i><i class="country">Cuba</i>,古巴自由行,在古巴旅游是一种怎样的体验?</a></div>
                                                <span class="ax-arrow"><i class="click">217</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i class="add">中国</i><i class="country">China</i>,道北,洛阳人熟悉又陌生的地方,如今新面貌</a></div>
                                                <span class="ax-arrow"><i class="click">348</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i class="add">日本</i><i class="country">Japan</i>,一边泡温泉一边看海景,来日本,体验独有的温泉文化 </a></div>
                                                <span class="ax-arrow"><i class="click">148</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i class="add">韩国</i><i class="country">Korea</i>,国际航线受阻,韩航空公司抢占国内航线 </a></div>
                                                <span class="ax-arrow"><i class="click">219</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i class="add">印度</i><i class="country">India</i>,巴厘岛“原始海滩”,海浪滔天,风景壮美,是绝佳的“冲浪秘境” </a></div>
                                                <span class="ax-arrow"><i class="click">91</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i class="add">印尼</i><i class="country">Indonesia</i>,印尼最活跃的活火山,导致一个王国毁灭,是最受欢迎旅游目的地 </a></div>
                                                <span class="ax-arrow"><i class="click">118</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i class="add">马尔代夫</i><i class="country">Maldives</i>,印尼最活跃的活火山,带上这篇旅游攻略,你才能知道马尔代夫有多美~ </a></div>
                                                <span class="ax-arrow"><i class="click">315</i>次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i class="add">泰国</i><i class="country">Thailand</i>,泰国的清新小镇,被誉为泰国的小瑞士,风景优美闻名于世</a></div>
                                                <span class="ax-arrow"><i class="click">124</i>次</span>
                                            </div>
                                        </div>
                                    </div>
    
                                    <ul class="pagination ax-pagination" style="display: none" id="travelPage"></ul>
                                    <div class="ax-pagination">
                                        <div class="ax-group">
                                            <a href="##" class="ax-prev" id="travelPrev">?</a><a href="##" class="ax-next" id="travelNext">?</a>
                                        </div>
                                    </div>
    
                                </div>
                            

多词模糊检索

多个关键字用空格隔开,支持中文筛选。

  • <script src="https://src.axui.cn/src/plugins/list/list.min.js" type="text/javascript"></script>
    <script type='text/javascript'>
        $(document).ready(function () {
            var options03 = {
                valueNames: [ 'ax-ell' ],
                item: 'ax-info-block',
                listClass:'travellist',
                fuzzySearch: {
                    searchClass:'keyword',
                    location: 0,
                    distance: 100,
                    threshold: 0.4,
                    multiSearch: true
                }
            };
            var travelList03 = new List('travel03', options03);
            $('#travel03 .ax-val-none').click(function() {
                travelList03.fuzzySearch();
                return false;
            });
        });
    </script>
                            
  •                             <div class="inner" id="travel03">
    
                                    <div class="ax-grid ax-padding">
                                        <ul class="ax-grid-inner">
                                            <li class="ax-grid-block ax-col-9">
                                                <div class="ax-row ax-input-group">
                                                    <span class="ax-title ax-btn">关键字</span>
                                                    <div class="ax-flex-block">
                                                        <input class="keyword" placeholder="多词模糊筛选" type="text">
                                                        <span class="ax-pos-right"><a href="##" class="ax-iconfont ax-icon-close ax-val-none"></a></span>
                                                    </div>
                                                </div>
                                            </li>
    
                                        </ul>
                                    </div>
    
                                    <div class="travellist">
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><span class="ax-ell">新加坡Singapore,南航与英航签署联营合作协议代码共享</span></div>
                                                <span class="ax-arrow">26次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><span class="ax-ell">英国United Kingdom,到英国大城小镇看“亮灯”</span></div>
                                                <span class="ax-arrow">45次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell">英国United Kingdom,英国人喝茶不再流行贵族范</a></div>
                                                <span class="ax-arrow">234次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell">西班牙Spain,西班牙斗牛与逗牛,精彩各不同</a></div>
                                                <span class="ax-arrow">98次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell"><i></i>中国China,出了转广州拍照,朋友以为我去了澳洲旅游!</a></div>
                                                <span class="ax-arrow">59次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell">古巴Cuba,古巴自由行,在古巴旅游是一种怎样的体验?</a></div>
                                                <span class="ax-arrow">217次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell">中国China,道北,洛阳人熟悉又陌生的地方,如今新面貌</a></div>
                                                <span class="ax-arrow">348次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell">日本Japan,一边泡温泉一边看海景,来日本,体验独有的温泉文化 </a></div>
                                                <span class="ax-arrow">148次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell">韩国Korea,国际航线受阻,韩航空公司抢占国内航线 </a></div>
                                                <span class="ax-arrow">219次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell">印度India,巴厘岛“原始海滩”,海浪滔天,风景壮美,是绝佳的“冲浪秘境” </a></div>
                                                <span class="ax-arrow">91次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell">印尼Indonesia,印尼最活跃的活火山,导致一个王国毁灭,是最受欢迎旅游目的地 </a></div>
                                                <span class="ax-arrow">118次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell">马尔代夫Maldives,印尼最活跃的活火山,带上这篇旅游攻略,你才能知道马尔代夫有多美~ </a></div>
                                                <span class="ax-arrow">315次</span>
                                            </div>
                                        </div>
                                        <div class="ax-info-block">
                                            <div class="ax-row">
                                                <div class="ax-col"><a href="##" class="ax-ell">泰国Thailand,泰国的清新小镇,被誉为泰国的小瑞士,风景优美闻名于世</a></div>
                                                <span class="ax-arrow">124次</span>
                                            </div>
                                        </div>
                                    </div>
    
                                </div>
                            
经研究发现valueNames: [ 'ax-ell' ]中,ax-ell样式包括的标签内最多只能含一个class样式,否则会导致检索失败!