如何在使用javascript筛选元素列表时显示响应

Question

你好，我正在创建一个FAQ页面，该页面必须使用如下所示的javascript进行过滤

信用：https://makitweb.com/jquery-search-text-in-the-element-with-contains-selector/

$(document).ready(function () {
$('#filter').keyup(function () {
// Search text
var text = $(this).val().toLowerCase();
var error = document.getElementById("error");
// Hide all content class element
$('.mobrog-ux-text').hide();
// Search 
$('.mobrog-ux-text').each(function () {

if ($(this).text().toLowerCase().indexOf("" + text + "") != -1) {
$(this).closest('.mobrog-ux-text').show();
setTimeout(
function () {
var x = document.getElementById("myDIV");
x.style.display = "none";
}, 4000);

error.style.display = "none";
}
else if($(this).text().toLowerCase().indexOf("" + text + "") == 0) {
error.style.display = "block";
}
});
});
});
<form align="center">
<input id="filter" onkeydown="keydownFunction()" oninput="keyPress(this.value)" class="searchfield" type="text"
name="search" placeholder="Search the help center">
</form>
<div style="color: white;padding : 10px" align="center"></div>
</div>
<div class="content2">
<h2>Frequently asked questions</h2>
<div id"pag"="id" pag""="pag" ""></div>
<div align="center" class="col-10">
<div class="mobrog-tab-container maxwidth">
<div id="myDIV" class="loader"></div>
<div class="error" id="error"> No result found!!</div>
<div id="results" class="mobrog-ux-vertical-tabs">
<div id="tar" class="mobrog-tabs">
<button data-tab="tab1" class="active">sample tab button?<span></span></button>

<button class="empty"></button>
</div>
<div class="mobrog-maincontent">
<div data-tab="tab1" class="mobrog-tabcontent active">
<div class="mobrog-ux-text">
<button class="mobrog-accordion">sample button</button>
<div class="mobrog-panel">
<p>
sample text
</p>

</div>
</div>

这是有效的，但当在我的常见问题页面上搜索的DIVS列表中找不到过滤后的单词时，我试图显示一条消息

我尝试了以下

else if ($(this).text().toLowerCase().indexOf("" + text + "") == 0) {
//error message display
}

但是不起作用

(例如，当我输入一个在我的常见问题解答中不存在的单词时，我想在div中显示一条错误消息(，反之亦然，当该单词在我的常用问题解答页面中找到时(

就像它在RegExp方法中的使用方式一样使用输入过滤器对潜水器进行实时搜索

当我输入可用和不可用的单词时，出现错误消息

请告诉我，当找到或没有找到已过滤的单词时，我如何有效地显示消息

感谢

Answer 1

扩展我的评论，这是一个如何实现类似内容的示例。

重申一下，主要问题是如果任何结果不匹配，就会显示错误，而不是如果none匹配，就会显示

为了解决这个问题，我们可以在循环外添加一个变量，以确定是否有任何结果与匹配

$(document)
.ready(function () {
$('#filter')
.keyup(function () {
// Search text
var text  = $(this).val().toLowerCase();
var error = document.getElementById("error");

// storing this in a variable will reduce how many times you call the function
var $ux_texts = $('.mobrog-ux-text');
// Hide all content class element
$ux_texts.hide();

// variable to update if any match is found
var has_match = false;
// Search 
$ux_texts
.each(function () {
var $this = $(this);
if ($this.text().toLowerCase().indexOf("" + text + "") === -1) {
// flip the logic so we can return early - makes for cleaner code
return;
}
$this.closest('.mobrog-ux-text').show();
setTimeout(function () {
var x = document.getElementById("myDIV");
x.style.display = "none";
}, 4000);
has_match = true;
});
// error handling
if (has_match) {
error.style.display = "none";
} else {
error.style.display = "block";
}
});
});