list.js で fuzzy-search をすると pagination が消える
// list.js に食わせるデータ
var database = [
{"name":"name1", "value":"v1"},
{"name":"name2", "value":"v2"},
{"name":"name3", "value":"v3"},
{"name":"name4", "value":"v4"},
{"name":"name5", "value":"v5"},
{"name":"name6", "value":"w1"},
{"name":"name7", "value":"w2"},
{"name":"name8", "value":"w3"},
{"name":"name9", "value":"w4"},
];
// 検索オプション
var options = {
valueNames: ['name','value'],
page: 3,
pagination: true,
item: '<div><h4 class="name"></h4><p class="value"></p></div>'
};
var result = new List('mylist', options, database);
// 検索ヒット数を表示
result.on('searchComplete', function(a){
$("#hits").html(a.matchingItems.length);
});
$("#hits").html(result.size);
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script type="text/javascript" src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
</head>
<body>
<div id="mylist">
<input type="text" class="fuzzy-search">
<p style="font-size: 15px">ヒット数 : <span id="hits"></span></p>
<ul class="list"></ul>
<ul class="pagination"></ul>
</div>
</body>
</html>
問題:class="fuzzy-search" だとページボタンが表示されません。
現象確認:page:3と設定しているため、例えば検索フォームで v を入力すると 5件がヒットし、ページボタンが表示されることを期待しているのですが、表示されません。
class="search" とすると問題なくページボタンが表示されます。
and検索を使いたいのでfuzzy-search を有効にしたいのですが、解決策をご教授いただけると幸いです。