Мне удается отобразить совпадающий результат, введя букву в поле фильтра, но я могу сделать так, чтобы совпадающий результат отображался при нажатии «backspace» (удаление буквы одна за другой).Например, если я наберу «K», «U», «S» в следующем примере, появятся строки K и B, но если я уберу «S», «U» по одной, то результат долженлюбые слова с буквой "K", в моем коде это не так.
Кроме того, после отображения сообщения о несоответствии результатов, если я удаляю букву одну за другой, результат будет показываться пустым вместо сопоставленного результата.
$(function($) {
var list = { letters:[] };
var $ul = $("<ul></ul>").appendTo(".page-content");
$(".page-content").append("<p id='no_result_found'></p>");
$("nav.link-list a").each(function(itmLetter) {
var brandTitle = $(this).attr("title");
itmLetter = brandTitle.trim().substring(0, 1).toUpperCase();
if (list.letters.indexOf(itmLetter) < 0) {
list[itmLetter] = [];
list.letters.push(itmLetter);
$ul.append(
$("<li/>", {
"class": "AddContent",
"id": itmLetter,
"data-content": itmLetter
})
); // end of $ul.append()
} // end of if statement
// push letters to each nav-list
list[itmLetter].push($(this));
}); // end of alphabet list
list.letters.sort();
$("article.category-list").empty();
$.each(list.letters, function(i, letter){
list[letter].sort(function(a, b) {
return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
}); // end of letters.sort()
var ul = $("<ul/>");
$.each(list[letter], function(idx, itm){
ul.append(itm);
}); // end of .each()
$("article.category-list").append($("<nav/>").addClass("link-list").append($("<h3/>").addClass("alphabet").html(letter)).append(ul));
}); // end of .each()
$("li.AddContent").click(function() {
var al = $(this).attr("id");
$("nav.link-list").each(function(){
var brand = $(this).find("a").attr("title");
$(this).css("display", "none").filter(function(){
return brand.trim().substring(0, 1).toUpperCase() == al;
}).prependTo("article.category-list").fadeIn(500);
}); //end of each()
}); //end of click()
// filter field
$("input#searchTerm").on("keyup", function(){
var inputValue = $(this).val().toLowerCase();
var checkEmpty = [];
$("nav.link-list ul").children("a").each(function(){
var brand = $(this).attr("title");
if (brand.toLowerCase().indexOf(inputValue) > -1) {
checkEmpty.push('1');
$(this).fadeIn(800)
} else {
$(this).css("display", "none");
}
}); // end of .each()
if ($("nav.link-list ul").children("a").is("visible")) {$("nav.link-list ul").parent().addClass("active");}
if(checkEmpty.length == 0)
{
$('#no_result_found').html('Sorry, no matched result is found, please try again.');
}
else
{
$('#no_result_found').html('');
}
$('.link-list').each(function(){
var item=$(this);
if(item.find('a').get().length==item.find('a:hidden').get().length) {
item.hide();
}
else {
item.show();
}
});
if(inputValue.length==0){
$('.link-list').show();
}
}); // end of .on(keyup)
// no result
}); //end of script
.AddContent:before {
content: attr(data-content);
}
.page-content h1 {
display: inline;
float: left;
}
/**** search field ****/
.page-content__body {
display: block;
float: right;
position: relative;
top: 24px;
width: 20%;
}
.search {
width: 100%;
position: relative
}
.searchTerm {
float: left;
padding: 5px;
outline: none;
color: #9DBFAF;
height: 28px !important;
border: none !important;
border-bottom: 1px solid #eaeaea !important;
padding: 0 4px !important;
}
.searchTerm:focus{
color: #00B4CC;
}
.searchButton {
position: absolute;
right: 0;
width: 20px;
height: 20px;
border: transparent;
background: transparent;
text-align: center;
color: #8e8e8e;
cursor: pointer;
font-size: 16px;
margin-top: 4px !important;
}
/*Resize the wrap to see the search bar change!*/
.brand-search-wrap{
width: 100%;
}
/**** Alpabet list ****/
.page-content ul {
list-style-type: none;
padding: 0 12px;
width: 100%;
display: flex;
border-bottom: 1px solid #eaeaea;
align-items: center;
flex-basis: 100%;
text-align: center;
justify-content: flex-start;
flex-wrap: wrap;
}
.page-content ul li {
cursor: pointer;
text-align: center;
display: flex;
flex-grow: 1;
padding: 12px 4px;
transition: 0.4s;
}
.AddContent:before {
content: attr(data-content);
display: block;
font-size: 20px;
margin: auto;
transition: 0.4s;
}
.page-content ul li:hover,
.page-content ul li:focus {
background-color: #444;
}
.AddContent:hover:before,
.AddContent:focus:before
{
color: #fff;
}
/*** link-list box ****/
.link-list.box {
padding: 0 0 2px 2px;
}
.link-list__header {
text-align: left;
padding: 0;
font-size: 1.25rem;
position: relative;
top: 8px;
left: 52px;
padding: 0;
min-height: 0 !important;
line-height: 1;
}
.link-list__background {
padding-top: 0;
height: 56px;
padding: 8px 0 0 16px;
}
.link-list__image {
width: 12% !important;
padding: 0;
position: relative;
bottom: 24px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Brands</h1>
<div class="brand-search-wrap">
<div class="search">
<input type="text" class="searchTerm" id="searchTerm" placeholder="Enter the brand name here">
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</div>
</div>
<div class="page-content"></div>
<article class="category-list">
<nav class="link-list">
<a href="/brands/abus" title="ABUS">ABUS</a>
</nav>
<nav class="link-list">
<a href="/brands/abus" title="ACC">ACC</a>
</nav>
<nav class="link-list">
<a href="/brands/abus" title="BUS">BUS</a>
</nav>
<nav class="link-list">
<a href="/brands/abus" title="BKUS">BKUS</a>
</nav>
<nav class="link-list">
<a href="/brands/abus" title="KUS">KUS</a>
</nav>
<nav class="link-list">
<a href="/brands/abus" title="SUK">SUK</a>
</nav>
<nav class="link-list">
<a href="/brands/abus" title="YUG">YUG</a>
</nav>
</article>