Estoy tratando de imaginar cómo puedo hacer una base de coincidencia parcial en la entrada dada por el usuario. Verifique ese valor inside
con la entrada dentro de array
para cualquier coincidencia parcial, luego agregue una clase display
Por ejemplo, si escribo dentro del cuadro de entrada lo siguiente:
Construir aplicación web John James
Obtendrá todos los valores dentro de cualquier coincidencia parcial dentro de la matriz. Luego recorra todas las clases name
para agregar una clase llamada display
. Si no hay una sola coincidencia, eliminará la clase display
$(".task-label input").on("change keyup paste", function(){
let handles = ['john', 'jake', 'james'];
for(let elements of handles ) {
if (elements.includes($('.task-label input').value())) {
$('.name-'+ elements).addClass();
} else {
console.log('no match');
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="task-label">
<input id="name" type="text" name="name">
</div>
<ul class="name-list">
<li id="john" class="name name-john">@John</li>
<li id="jake" class="name name-jake">@Jake</li>
<li id="alex" class="name name-alex">@Alex</li>
<li id="allison" class="name name-allison">@Allison</li>
</ul>
3 respuestas
Si yo fuera tú, así es como lo haría.
Primero, cambiaría las clases de la lista a atributos de datos. Esto lo hace mucho más limpio y fácil de buscar.
Nota: esto no tiene en cuenta mayúsculas / minúsculas. Necesita implementar un poco más de código para que eso funcione.
Se comenta el código y si tiene alguna pregunta, por favor pregunte
$(".task-label input").on("change keyup paste", function() {
// check for special characters
var letters = /^[0-9a-zA-Z]+$/;
// get input and convert to array
var searchFor = $(this).val().split(" ");
// clear the display class before a new search to reset
$(".name-list").find('li').removeClass("display");
// search the list from the elements in the array
for(var el of searchFor){
var name = "[data-name*="+el+"]";
// make sure not empty or special char before finding the name
if(el.match(letters)){
$(".name-list").find(name).addClass("display");
}
}
});
.display {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="name-list">
<li id="john" class="name" data-name="john">@John</li>
<li id="jake" class="name" data-name="jake">@Jake</li>
<li id="alex" class="name" data-name="alex">@Alex</li>
<li id="allison" class="name" data-name="allison">@Allison</li>
</ul>
<div class="task-label">
<input id="name" type="text" name="name">
</div>
El nombre de la función jquery para obtener el valor de entrada de texto es val (), no value (). De todos modos, no necesita usar jquery para obtener su valor. Simplemente consulte "this.value" dentro del controlador. La siguiente implementación verifica las coincidencias parciales y tampoco distingue entre mayúsculas y minúsculas.
$(".task-label input").on("change keyup paste", function(){
let handles = ['john', 'jake', 'james'];
for(let elements of handles ) {
if (elements.includes(this.value.toLowerCase())) {
console.log("matched with " + elements);
$('.name-'+ elements).addClass();
}else {
console.log("no-match");
}
}
})
Está casi en lo cierto con su solución, solo necesita cambiar esta parte elements.includes($('.task-label input').val())
a $('.task-label input').val().includes(elements)
porque si esos nombres predefinidos existen en cualquier parte de la entrada del usuario, entonces agregaría la clase. Espero que esto ayude..
Preguntas relacionadas
Nuevas preguntas
javascript
Para preguntas sobre la programación en ECMAScript (JavaScript / JS) y sus diversos dialectos / implementaciones (excepto ActionScript). Incluya todas las etiquetas relevantes en su pregunta; por ejemplo, [node.js], [jquery], [json], etc.