Funzione di ricerca dinamica per mostrare/nascondere i div

Question

questo è il mio primo post su StackOverflow. Spero che non vada terribilmente male.

<input type="Text" id="filterTextBox" placeholder="Filter by name"/> 
<script type="text/javascript" src="/resources/events.js"></script> 
<script> 
$("#filterTextBox").on("keyup", function() { 
    var search = this.value; 
    $(".kurssikurssi").show().filter(function() { 
     return $(".course", this).text().indexOf(search) < 0; 
    }).hide();   
}); 

</script> 

Ho un frammento di javascript come questo sul mio progetto scolastico, che può essere trovato qui: http://www.cc.puv.fi/~e1301192/projekti/tulos.html

Così la barra di ricerca in fondo dovrebbe filtrare div e visualizzare solo quelli, che contengono certi parola chiave. (Ad esempio, se si digita l'elettronica digitale, verranno visualizzati solo i Div che contengono il testo "Digital Electronics II" e "Digital Electronics". In questo momento, se si digita un carattere casuale a caso, si nasconde tutto come dovrebbe, ma quando tipo all'inizio di un nome del corso, non nasconde i corsi che dont contenere la determinata stringa di testo

Ecco un esempio che ho usato (che funziona bene):. http://jsfiddle.net/Da4mX/

Difficile da spiegare, ma spero che tu ti renda conto se provi la funzione di ricerca sulla mia pagina. Inoltre, sono piuttosto nuovo in javascript e ottengo la parte in cui imposti la stringa della searchbox come var search, il resto non ne sono così sicuro

Per favore aiutatemi ad abbattere il copione, e possibilmente indicare dove sto andando male, e come superare il problema.

Answer 1

nel tuo caso penso di mostrare e nascondere il genitore di corsi in modo da poter provare

$("#filterTextBox").on("keyup", function() { 
    var search = $(this).val().trim().toLowerCase(); 
    $(".course").show().filter(function() { 
     return $(this).text().toLowerCase().indexOf(search) < 0; 
    }).hide();   
}); 

Answer 2

Stavi di accesso a elementi sbagliati. Questo dovrebbe funzionare:

$(".kurssikurssi").find('.course').show().filter(function() { 
     var $this = $(this) 
     if($this.text().indexOf(search) < 0){ 
       $this.hide() 
     } 
}) 

Answer 3

Prova questo funziona ora, incolla questo codice nella console e verifica, effettuando una ricerca.

$("#filterTextBox").on("keyup", function() { 
 
    var search = this.value; if(search == '') { return } 
 
$(".course").each(function() { 
 
    a = this; if (a.innerText.search(search) > 0) {this.hidden = false} else {this.hidden = true} 
 
}); }) 
 

Controllare e la ricerca sta lavorando.

Answer 4

Il tuo problema è lì:

return $(".course", this) 

Da jquery doc: ("course") http://api.jquery.com/jQuery/#jQuery-selection

Internally, selector context is implemented with the .find() method, so $("span", this) is equivalent to $(this).find("span")

funzione di filtro già verificare ogni elemento poi, quando si tenta di mettere $ a contesto, recupererà tutto di nuovo ...

Codice file:

$("#filterTextBox").on('keyup', function() 
{ 
    var search = $(this).val().toLowerCase(); 
    $(".course").show().filter(function() 
    { 
     return $(this).text().toLowerCase().indexOf(search) < 0; 
    }).hide(); 
}); 

In realtà, in alternativa è possibile utilizzare: contiene selettore CSS(), ma, non è ottimizzato per una grande lista e non crossbrowser

http://caniuse.com/#search=contains