sortList 排序列表
List.js插件 PLUGIN
List.js是非常好用的列表筛选插件，在Github上人气很高，支持单词精确检索、多词模糊检索、排序和分页。插件在当页实现筛选效果不跳转页面。目前使用的版本是v1.5.0，本框架未做任何源码修改。详细使用方法查看插件官网，或者Github。
该插件不需要依赖可单独使用，当然可以借助jquery的选择器进行复杂的功能设计。
<script type="text/javascript" src="https://src.axui.cn/v1.0/src/plugins/list/list.min.js"></script>
常规使用方法
常规使用功能包括：关键字检索、排序、选择某一类、显示全部等。值得注意的是，中文排序不准确！
-
<script src="https://src.axui.cn/v1.0/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/v1.0/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/v1.0/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条信息。
新加坡Singapore，南航与英航签署联营合作协议代码共享
26次
英国United Kingdom，到英国大城小镇看“亮灯”
45次
-
<script src="https://src.axui.cn/v1.0/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>
上页和下页
使用方法与分页类似，在隐藏分页菜单之后，只是增加了前一页和后一页按钮。
新加坡Singapore，南航与英航签署联营合作协议代码共享
26次
英国United Kingdom，到英国大城小镇看“亮灯”
45次
-
<script src="https://src.axui.cn/v1.0/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>
多词模糊检索
多个关键字用空格隔开，支持中文筛选。
新加坡Singapore，南航与英航签署联营合作协议代码共享
26次
英国United Kingdom，到英国大城小镇看“亮灯”
45次
-
<script src="https://src.axui.cn/v1.0/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样式，否则会导致检索失败！