В дополнение к сокрытию несоответствий с .toggle()
вы захотите создать условное условие if
, которое проверяет наличие искомого текста.Это будет срабатывать, когда каждый результат будет найден.Внутри этого условия вам нужно установить флаг (в данном примере found
), который обозначает, что результат был найден.
Этот флаг должен быть изначально установлен в false
, и должен быть установлен внутри функции keyup
, но вне условного indexOf(value)
(поскольку вы хотите перебрать все результатов поиска до того, как поймете, чтосовпадений не найдено).
Отсюда нужно просто использовать .hide()
и .show()
, чтобы показать элемент, который вы хотите отобразить, когда результат не найден.Обратите внимание, что этот элемент должен быть скрыт по умолчанию.
Это можно увидеть в следующем:
// CUSTOM SCRIPT
// List Filter
$(document).ready(function() {
// On KeyUp...
$("#input_search_client").on("keyup", function() {
// No results have been found yet
let found = false;
// All values typed in to lower case...
var value = $(this).val().toLowerCase();
$("#list_search_client a").filter(function() {
// Hide if it does not match
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
if ($(this).text().toLowerCase().indexOf(value) > -1) {
// Results found
$('.none-found').hide();
found = true;
}
// No results found
if (!found) {
$('.none-found').show();
}
});
});
});
.list-group.none-found {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<!-- Google Material Design Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:100,300,400,500,700,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<form>
<!-- CARD INTRO -->
<section class="d-flex justify-content-center mb-3">
<!-- CARD INTRO LEFT -->
<div class="text-center">
<h1 class="mb-0 display-4">Search</h1>
<h4 class="mb-0">Active Clients</h4>
</div>
</section>
<!-- CARD INTRO END -->
<!-- SECTION - FEX.GRID - JUSTIFY CENTER -->
<section class="form-group d-flex justify-content-center mb-2">
<!-- COL-6 - FEX.COLUMN - ELEMENT -->
<div class="col-6 px-0">
<input class="form-control form-control-lg px-2" value="" id="input_search_client" type="text" placeholder="Search">
</div>
</section>
<!-- SECTION - FEX.GRID - JUSTIFY START -->
<section class="form-group d-flex justify-content-center mb-2">
<!-- COL-6 - FEX.COLUMN - ELEMENT -->
<div class="col-6 px-0">
<div class="list-group" id="list_search_client">
<a href="#" class="list-group-item list-group-item-action">Elliot Alderson</a>
<a href="#" class="list-group-item list-group-item-action">Darlene Alderson</a>
<a href="#" class="list-group-item list-group-item-action">Angela Moss</a>
<a href="#" class="list-group-item list-group-item-action">Sarah Connor</a>
</div>
<div class="list-group none-found">
<a href="#" class="list-group-item list-group-item-action">No results found.</a>
</div>
</div>
</section>
<hr>
</form>