如何使用javascript和list.js在没有找到结果的情况下在搜索中显示“未找到结果”
如何使用javascript和list.js在没有找到结果的情况下在搜索中显示“未找到结果”
提问于 2016-02-28 17:46:09
如何在用户搜索不在列表中的内容后显示未找到的结果。我正在使用list.js，但我不知道如何实现它？
有没有一种方法可以在我的代码中添加一个JavaScript代码，当我使用list.js或更好的替代方法进行搜索时，它可以监视表列表为空，并显示没有找到的结果？
我需要一种方法，我可以告诉我的用户，他们正在搜索的东西不在那里。
var monkeyList = new List('users', {
valueNames: ['name', 'born'],
page: 3,
plugins: [ ListPagination({}) ]
});<div id="users">
<input class="search" placeholder="Search" />
<button class="sort" data-sort="name">
Sort by name
</button>
<ul class="list">
<li>
<h3 class="name">Jonny Stromberg</h3>
<p class="born">1986</p>
</li>
<li>
<h3 class="name">Jonas Arnklint</h3>
<p class="born">1985</p>
</li>
<li>
<h3 class="name">Martina Elm</h3>
<p class="born">1986</p>
</li>
<li>
<h3 class="name">Gustaf Lindqvist</h3>
<p class="born">1983</p>
</li>
</ul>
<ul class="pagination"></ul>
</div>
<script src="http://listjs.com/no-cdn/list.js"></script>
<script src="http://listjs.com/no-cdn/list.pagination.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-02-28 21:53:29
将此代码添加到HTML中：
<div class="not-found" style="display:none">Not Found</div>当找不到匹配的列表元素时，会显示出来。
已附加此事件侦听器以侦听搜索框中的更改：
$('.search').on('keyup', function(event) { // Fired on 'keyup' event
if($('.list').children().length === 0) { // Checking if list is empty
$('.not-found').css('display', 'block'); // Display the Not Found message
} else {
$('.not-found').css('display', 'none'); // Hide the Not Found message
}
});Stack Overflow用户
发布于 2018-10-15 02:19:31
您也可以像这样使用searchComplete回调(v1.5.0)：
monkeyList.on('searchComplete', function (e) {
if (e.matchingItems.length == 0) {
// NO RESULTS
// jquery
$('.not-found').show();
// vanilla
// by classname
document.getElementsByClassName('className')[0].style.display = "block";
// or by ID
document.getElementById("elementID").style.display = "block";
} else {
$('.not-found').hide();
document.getElementsByClassName('className')[0].style.display = "none";
document.getElementById("elementID").style.display = "none";
}
});希望这能有所帮助！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35680967
复制相关文章
相似问题
腾讯云开发者
