当找不到匹配的记录时，如何在搜索操作中显示"No records found"

Question

我有一个搜索选项，我可以在页面中搜索元素，搜索操作正在工作，但我想显示"没有记录发现"消息

如果任何项可见，它应该自动隐藏

function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myTableDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}

}

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown"> <i class="fas fa-table btn dropdown-toggle p-0" onclick="lastSaved();" type="button" id="TabledropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
<div id="myTableDropdown" class="dropdown-menu Organization_Desg_table_dropdown" aria-labelledby="TabledropdownMenuButton">
<form>
<label class="d-flex flex-row mb-0" style="padding: 4px 12px;">

<input type="text" placeholder="Search.." id="myInput" data-live-search="true" onkeyup="filterFunction()">
</label>
<hr class="m-0" /> <span id="errmsg"></span>
<a>
Designation Name,
</a>
<a >
Mail Alias,
</a>
<a >
Added By,
</a>
<a >
Added Time,
</a>
<a >
Modified By,
</a>
<a >
Modified Time,
</a>
<hr class="mt-1 mb-2" />
</form>
<div class="d-flex flex-row Organization_Desg_table_item">
<button>save</button>
</div>
</div>
</div>

Answer 1

在你的函数中，你应该确定你是否有结果，你可以只使用布尔变量;如果你有结果，你清除errmsgspan的文本，否则你填充它:

function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myTableDropdown");
a = div.getElementsByTagName("a");
let noResults = true;
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
noResults = false; // at least one record was found
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
document.getElementById("errmsg").innerHTML = noResults ? 'No records found' : '';
}

.error {
color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown"> <i class="fas fa-table btn dropdown-toggle p-0" onclick="lastSaved();" type="button" id="TabledropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></i>
<div id="myTableDropdown" class="dropdown-menu Organization_Desg_table_dropdown" aria-labelledby="TabledropdownMenuButton">
<form>
<label class="d-flex flex-row mb-0" style="padding: 4px 12px;">

<input type="text" placeholder="Search.." id="myInput" data-live-search="true" onkeyup="filterFunction()">

</label>
<hr class="m-0" /> <span class="error" id="errmsg"></span>
<a>
Designation Name,
</a>
<a>
Mail Alias,
</a>
<a>
Added By,
</a>
<a>
Added Time,
</a>
<a>
Modified By,
</a>
<a>
Modified Time,
</a>
<hr class="mt-1 mb-2" />
</form>
<div class="d-flex flex-row Organization_Desg_table_item">
<button>save</button>
</div>
</div>
</div>

Answer 2

你可以检查你所有的锚标签的样式是否为display:none，然后你可以添加"如下所示:

function filterFunction() {
var input, filter, ul, li, a, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
div = document.getElementById("myTableDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";
} else {
a[i].style.display = "none";
}
}
var isNoRecords = true;
for (i = 0; i < a.length; i++) {
if(a[i].style.display != "none") {
isNoRecords = false;
}
}
if (isNoRecords) {
document.getElementById("errmsg").innerHTML = 'No records found';
} else {
document.getElementById("errmsg").innerHTML = '';
}
}