¿Cómo verifico los valores o partical dentro de una matriz usando una entrada?

Question

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>

javascript jquery html

0

clestcruz 26 sep. 2019 a las 05:27

Answer 1

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>

1

Icewine 26 sep. 2019 a las 04:34

Answer 2

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");
     }         
  }  
})

1

Murali Nepalli 26 sep. 2019 a las 03:14

Answer 3

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..

1

Abhishek Bag 26 sep. 2019 a las 02:49

¿Cómo verifico los valores o partical dentro de una matriz usando una entrada?

3 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript