javascript - example - tooltip input bootstrap

¿Cómo puedo filtrar mis enlaces de la barra de navegación de bootstrap 4 con una barra de búsqueda?

Question

Estoy haciendo la transición de mi antiguo sitio web usando Bootstrap 4, así que definitivamente ha sido un proceso de aprendizaje.

Tengo el diseño del sitio funcionando bien, pero me doy cuenta de que mi barra de navegación vertical del lado izquierdo tiene muchos enlaces. Muchos de estos agrupados en nidos colapsados.

Creo que sería bueno agregar una barra de búsqueda en la parte superior de mi navegador para poder filtrar los enlaces en función de cadenas parciales ingresadas en la barra de búsqueda. Esto funciona para los enlaces que no se ocultan dentro de un div oculto (o class=collapsed boostrap class=collapsed 4 ul).

¿Apreciaría la ayuda en la modificación de mi código para mostrar resultados filtrados que incluyan enlaces ocultos dentro de la cola colapsada?

Aquí hay un violín

$(''.search-filter'').on(''keyup'', function() {
var input = $(''.search-filter'').val();
var filter = input.toLowerCase();
if (filter.length == 0) { // show all if filter is empty
$(''a'').each(function() {
$(this).show(); // show links
});
return;
} else {
$(''a'').removeClass(''collapsed'');
$(''a'').each(function() {
$(this).hide(); // hide all links once search is begun
});
$(''a:contains("'' + filter + ''")'').each(function() {
$(this).removeClass(''collapsed''); // remove bootstrap 4 collapsed class designation
$(this).show(); // show only matched links to search string?
});
}
});

@import url(''https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'');
.navbar-nav.sidebar-nav {
position: absolute;
left: 0;
top: 0;
margin-top: 56px;
padding-bottom: 56px;
height: 100vh;
background: #292b2c;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
overflow: auto;
}
.navbar-brand {
display: inline-block;
padding-top: .25rem;
padding-bottom: .25rem;
margin-right: 1rem;
font-size: 1.25rem;
line-height: inherit;
white-space: nowrap;
color: #fff;
}
.navbar-nav .nav-link {
color: rgba(255, 255, 255, .5);
}

<div id="link-content">
<ul class="sidebar-nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fa fa-fw fa-home"></i> Home</a>
</li>
<li class="nav-item">
<label for="nav-search" class="col-2 col-form-label sr-only">Search links</label>
<div class="col p-2">
<input class="form-control form-control-sm search-filter" type="search" id="nav-search" placeholder="Search for tools">
</div>
</li>
<li class="nav-item">
<span class="navbar-brand">Popular tools</span>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-fw fa-calculator"></i> Calculator</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-fw fa-battery-3"></i> Battery </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-fw fa-database"></i> Pancake Batter</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-fw fa-clock-o"></i> Marzipan</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-fw fa-tags"></i> Cakes and Muffins</a>
</li>
<li class="nav-item">
<span class="navbar-brand">Categories</span>
</li>
<li class="nav-item">
<a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapseComponents"><i class="fa fa-fw fa-flask"></i> Cars</a>
<ul class="sidebar-second-level collapse" id="collapseComponents">
<li>
<a class="nav-link-collapse collapsed" data-toggle="collapse" href="#collapseMulti2">American</a>
<ul class="sidebar-third-level collapse" id="collapseMulti2">
<li>
<a href="#">Ford</a>
</li>
<li>
<a href="#">GMC</a>
</li>
</ul>
</li>
<li>
<a class="nav-link-collapse collapsed" data-toggle="collapse" href="#collapseMulti3">European</a>
<ul class="sidebar-third-level collapse" id="collapseMulti3">
<li>
<a href="#">BMW</a>
</li>
<li>
<a href="#">Audi</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

Answer 1

Bueno, creo que lo he descubierto por mi cuenta (con un poco de ayuda de este post para un filter distingue mayúsculas y minúsculas).

1) Actualicé los enlaces envolviéndolos en un div with id #link-content , para separar mi filtro de la entrada de inicio y buscar.

2) Agregué el método sin distinción entre mayúsculas y minúsculas mencionado anteriormente.

Mi HTML:

 <ul class="sidebar-nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#"><i class="fa fa-fw fa-home"></i> Home</a>
</li>
<li class="nav-item">
<label for="nav-search" class="col-2 col-form-label sr-only">Search links</label>
<div class="col p-2">
<input class="form-control form-control-sm search-filter" type="search" id="nav-search" placeholder="Search for tools">
</div>
</li>
<div id="link-content"><!-- added this to wrap the links-->
<li class="nav-item">
<span class="navbar-brand">Popular tools</span>
</li>
<li class="nav-item filter">
<a class="nav-link" href="#"><i class="fa fa-fw fa-calculator"></i> Calculator</a>
</li>
<li class="nav-item filter">
<a class="nav-link" href="#"><i class="fa fa-fw fa-battery-3"></i> Battery </a>
</li>
<li class="nav-item filter">
<a class="nav-link" href="#"><i class="fa fa-fw fa-database"></i> Pancake Batter</a>
</li>
<li class="nav-item filter">
<a class="nav-link" href="#"><i class="fa fa-fw fa-clock-o"></i> Marzipan</a>
</li>
<li class="nav-item filter">
<a class="nav-link" href="#"><i class="fa fa-fw fa-tags"></i> Cakes and Muffins</a>
</li>
<li class="nav-item filter">
<span class="navbar-brand">Categories</span>
</li>
<li class="nav-item ">
<a class="nav-link nav-link-collapse collapsed" data-toggle="collapse" href="#collapseComponents"><i class="fa fa-fw fa-flask"></i> Cars</a>
<ul class="sidebar-second-level collapse" id="collapseComponents">
<li>
<a class="nav-link-collapse collapsed" data-toggle="collapse" href="#collapseMulti2">American</a>
<ul class="sidebar-third-level collapse" id="collapseMulti2">
<li>
<a href="#">Ford</a>
</li>
<li>
<a href="#">GMC</a>
</li>
</ul>
</li>
<li>
<a class="nav-link-collapse collapsed" data-toggle="collapse" href="#collapseMulti3">European</a>
<ul class="sidebar-third-level collapse" id="collapseMulti3">
<li>
<a href="#">BMW</a>
</li>
<li>
<a href="#">Audi</a>
</li>
</ul>
</li>
</ul>
</li>
</div>
</ul>

Mi código actualizado:

// Case insensitive method for filter
jQuery.expr['':''].casecontains = (a, b, c) => jQuery(a).text().toUpperCase().indexOf(c[3].toUpperCase()) >= 0;
$(''.search-filter'').on(''keyup'', function () {
var input = $(''.search-filter'').val();
console.log(''input: ''+input);
if (input.length != 0) {
// first hide the div #link-content lists from view
$(''#link-content li'').hide();
// but secretly unhide the collapsed links
// using .show, so the nested uls can be viewed
$(''#link-content li.nav-item ul'').show();
// then filter in the matching links only
$(''#link-content li:casecontains("''+input+''")'').show();
} else {
// secretly unhide the collapsed links
$(''#link-content li.nav-item ul'').hide();
// if search is empty, show the div and reset columns
$(''#link-content li'').show();
}
});

Aquí hay un fiddle con el ejemplo de trabajo que abre cualquier enlace oculto (clase colapsada en boostrap 4).

Answer 2

El enfoque que he usado es recordar qué elementos coinciden y luego usar esa lista para ocultar los padres.

Fiddle actualizado: https://jsfiddle.net/j2gpann3/1/

La ventaja de este enfoque es que los elementos del submenú ocultos (como ''BMW'', etc.) ahora aparecerán en la búsqueda y no tendrán grandes espacios por encima de los otros elementos ocultos. La búsqueda de expresiones regulares busca las ocurrencias de cada palabra, por lo que incluso si están fuera de orden con el texto del elemento del menú, todavía coincidirá.

$(''.search-filter'').on(''keyup'', function() {
var matches = [];
var input = $.trim($(''.search-filter'').val());
var val = ''^(?=.*//b'' + input.split(//s+/).join(''//b)(?=.*//b'') + '').*$''; // using individual word matching filter from http://.com/a/9127872/1544886
var filter = RegExp(val, ''i'');
if (input.length === 0) { // show all if filter is empty
$(''.collapse'').removeClass(''show'').addClass(''collapsed''); // hide collapsable items fast.
$(''.hide'').removeClass(''hide''); // remove any hidden elements from previous searches
} else {
$(''.collapse'').addClass(''show''); // show all collapsed items
$(''ul.sidebar-nav a:not(".home")'').filter(function() { // skip home <li> so it shows permanently
$this = $(this);
// test for a match to search string
text = $this.text().replace(//s+/g, '' '');
var isMatch = filter.test(text);
// store match so we can unhide parents of this item
if (isMatch) matches.push($this);
return !isMatch;
}).parent().addClass(''hide''); // this hides any <li> that doesn''t match search terms. Hiding <a> results in large gaps in the output
$.each(matches, function() { // unhide parents of our matches
this.parentsUntil(".sidebar-nav", ".hide").removeClass(''hide'');
});
}
});

La demostración requiere una clase de home agregada al enlace de Inicio para evitar que se oculte por la búsqueda:

<a class="nav-link home" href="#"><i class="fa fa-fw fa-home"></i> Home</a>

y una clase de CSS para hide añadido:

.hide {
display: none;
}

Answer 3

Si eliminas el:

toLowerCase();

Todo encaja perfectamente si lo escribes perfectamente. El problema es que el término de búsqueda aparece en minúscula, pero no coincide con las palabras en minúscula. Por lo tanto, cuando escribe calculadora, no coincide porque el elemento de navegación real se muestra como Calculadora, con una c mayúscula.

Por lo tanto, puede hacer que los elementos de navegación estén en minúscula también, a través de HTML o JavaScript, o hacerlo de otra manera, es decir, usar ID, pero eso podría causar problemas si el sitio es dinámico.

Un poco extraño puede ser usar mayúsculas en las primeras letras de cada palabra para que realmente coincida con el HTML. Eche un vistazo a ¿Cómo poner en mayúscula la primera letra de cada palabra, como una ciudad de 2 palabras?