mostrar dinámicamente/ocultar div basado en la entrada de la caja de texto

Question

estoy trabajando en un sitio web, Tengo una página que contiene una lista de las personas integradas así:

<div class="personsMenu"> 
    <div class="person"> 
     <div class="name">John</div> 
     <div class="age">18</div> 
    </div> 
    <div class="person"> 
     <div class="name">Kate</div> 
     <div class="age">24</div> 
    </div> 
    <div class="person"> 
     <div class="name">Tom</div> 
     <div class="age">17</div> 
    </div> 
</div> 

También tengo un cuadro de texto <input type="Text" id="filterTextBox"/>

usando jQuery que necesito para hacer lo siguiente:

Cuando la tipificación de inicio de usuario en el cuadro de texto del divs donde el "nombre" no contiene los caracteres desaparece (una especie de filtro dinámico, que sólo ven las personas que de nombre contiene el escrito diez caracteres)

Así la lógica debería ser así:

Cuando el usuario escribe un carácter en el cuadro de texto (o eliminar uno) de bucle que a través de todos los divs "persona" y si el "nombre" div interior esa "persona" contiene los caracteres que mostramos, de lo contrario la ocultamos (.show() y .hide() en jquery)

Y, por supuesto, si el cuadro de texto está vacío, mostramos todo.

¿Se puede hacer esto?

Gracias por cualquier ayuda

Answer 1

A cada golpe de teclado, usted podría .toggle() cada .person, pasando una variable que indica si es o no coincide con el valor actual, y por lo tanto se debe mostrar.

$('.my-textbox').keyup(function() { 
    var value = $(this).val(); 
    var exp = new RegExp('^' + value, 'i'); 

    $('.personsMenu .person').each(function() { 
     var isMatch = exp.test($('.name', this).text()); 
     $(this).toggle(isMatch); 
    }); 
});​ 

Modifique la expresión como mejor le parezca. En esta versión, verifica que el nombre comience en con el valor ingresado e ignora la cubierta.

Demo

Answer 2

Ya que este etiquetados con jQuery recomendaría encarecidamente su Autocomplete UI Control. Lo he usado en varios proyectos y puede actualizar la función de búsqueda para usar un almacén de datos local como este. Como nota al margen, es posible que desee considerar el uso de <ul> 's' y <li> s ...

código de ejemplo

//Search-As-You-Type 
$(id).find('input').autocomplete({ 
    minLength: 2, 
    focus: function(event, ui) {}, 
    select: function(event, ui) {}, 
    source: function(request, response){ 
     //here is where you want to call your custom function 
     findSite(request.term);    
    } 
}); 

Answer 3

Aquí hay un script debe tener en cuenta que utilizo y creé. También debe usar <ul> y <li>.

(function($){ 
    $.tzFilter = function(jq, phrase, type, column, ifHidden){ 
     var new_hidden = false; 
     if(this.last_phrase === phrase){ 
      return false; 
     } 

     if(!type){ 
      type = 'ul'; 
     } 

     var phrase_length = phrase.length; 
     var words = phrase.toLowerCase().split(' '); 

     var matches = function(elem){ 
      elem.show() 
     } 
     var noMatch = function(elem){ 
      elem.hide(); 
      new_hidden = true 
     } 
     var getText = function(elem){ 
      return elem.text() 
     } 

     if(column){ 
      var index = null; 
      if(type == 'table'){ 
       jq.find('thead > tr:last > th').each(function(i){ 
        if($.trim($(this).text()) == column){ 
         index = i; return false; 
        } 
       }); 
      } else if (type == 'ul'){ 
       jq.find("li").each(function(i){ 
        if(!$(this).attr('display', 'none')){ 
         if($.trim($(this).text()) == column){ 
         index = i; return false; 
         } 
        } 
       }); 
      } 

      if(index == null){ 
       throw('Index non trouvée: ' + column + '') 
      } 

      if(type == 'table'){ 
       getText = function(elem){ 
        return jQuery(elem.find(('td:eq(' + index + ')') )).text(); 
       } 
      } else if (type == 'ul') { 
       getText = function(elem){ 
        return jQuery(elem.find(('"li:eq(' + index + ')') )).text(); 
       } 
      } 
     } 

     // On a simplement ajouté une lettre, on va regarder pour le nouveau mot, sans devoir tout regarder à nouveau 
     if((words.size > 1) && (phrase.substr(0, phrase_length - 1) === this.last_phrase)){ 
      if(phrase[-1] === ' '){ 
       this.last_phrase = phrase; 
       return false; 
      } 

      // On va chercher uniquement pour le nouveau mot 
      var words = words[-1]; 

      // On cache uniquement les tables visibles 
      matches = function(elem) {;} 

      if(type == 'table'){ 
       var elems = jq.find('tbody > tr:visible'); 
      } else if (type == 'ul'){ 
       var elems = jq.find('li:visible'); 
      } 
     } else { 
      new_hidden = true; 

      if(type == 'table'){ 
       var elems = jq.find('tbody > tr') 
      } else if (type == 'ul') { 
       var elems = jq.find('li') 
      } 
     } 


     elems.each(function(){ 
      var elem = $(this); 
      $.tzFilter.has_words(getText(elem), words, false) ? matches(elem) : noMatch(elem); 
     }); 

     last_phrase = phrase; 

     if(ifHidden && new_hidden){ 
      ifHidden(); 
     } 
     return jq; 
    }; 

    // On cache pour accélérer le tout 
    $.tzFilter.last_phrase = "" 

    $.tzFilter.has_words = function(str, words, caseSensitive){ 
     var text = caseSensitive ? str : str.toLowerCase(); 
     for (var i=0; i < words.length; i++){ 
      if(text.indexOf(words[i]) === -1){ 
       return false; 
      } 
     } 
     return true; 
    } 
})(jQuery); 

Answer 4

Aquí hay algo para empezar. Estoy seguro de que está lejos de ser perfecto, pero no ha demostrado lo que ya ha intentado y lo que salió mal en su pregunta.

$("#filterTextBox").on("keyup", function() { 
    var search = this.value; 
    $(".person").show().filter(function() { 
     return $(".name", this).text().indexOf(search) < 0; 
    }).hide();   
});​​​​​​​​​​​​​ 

Aquí hay un working example.

Answer 5

$('input').keyup(function(){ 
    var value = this.value 
    $('.person') 
    .hide() 
    .children('.name') 
    .filter(function(){ 
     var re = new RegExp(value) 
     return re.test($(this).text()) 
    }) 
    .parent() 
    .show() 
}) 

Answer 6

Recientemente necesito este tipo de trabajo, y me parece una buena solución.Ver este jQuery popout div next to element of my choice

Answer 7

Esta búsqueda del código de cadena completa

$('#input-text').keyup(function() { 
    var value = $(this).val(); 
    $('#filter-parant > .filter-div').each(function() { 
     $('.filter-div:contains("' + value + '")').show(); 
     $('.filter-div:not(:contains("' + value + '"))').hide(); 

    }); 
}); 

espero que esto le ayudará a