Ciao
codice:
(immagino sia il contains)
Sì, chiaramente :contains determina la selezione di tutti gli elementi in cui è contenuta "almeno" la stringa specificata.
Quindi è palese che la stringa "Aula x" sia presente anche negli elementi che contengono il testo "Aula xlll".
Puoi risolvere in vari modi. Personalmente ti consiglierei di ciclare gli elementi in questione (ad esempio con each()), e controllarne il valore testuale per intero, in modo da stabilire se è uguale alla stringa cercata.
Qui un esempio completo:
codice:
<!DOCTYPE HTML>
<html>
<head>
<title>Esempio</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style type="text/css">
.tabella{
display: table;
}
.tabella>div{
display: table-row;
}
.tabella>div>div{
display: table-cell;
padding: .5rem;
border: 1px solid tan;
}
</style>
<script type="text/javascript">
function search(){
var text = this.value.trim().toLowerCase();
$(".rigaEven,.rigaOdd").each(function(){
var room = $('.room',this).text().trim().toLowerCase();
$(this).toggle( room == text || text == '' );
});
}
$(function(){
$('#search').on('input',search);
});
</script>
</head>
<body>
<div class="tabella">
<div class="rigaHead"></div>
<div class="rigaEven">
<div class="col1">
<p class='room'>Aula x</p>
<p class='where'>WHERE</p>
</div>
<div class="col2 half">
<p class='when'>09:00 - 13:00</p>
</div>
<div class="col3">
<p class="what">YYY</p>
<p class="who">PROFESSOR</p>
</div>
</div>
<div class="rigaOdd">
<div class="col1">
<p class='room'>Aula xlll</p>
<p class='where'>WHERE</p>
</div>
<div class="col2 half">
<p class='when'>11:00 - 13:00</p>
</div>
<div class="col3">
<p class="what">ZZZ</p>
<p class="who">PROFESSOR</p>
</div>
</div>
</div>
<input type="text" id="search">
</body>
</html>
Rispetto al tuo esempio di partenza, a parte la funzione di ricerca in sé, ho apportato qualche sostanziale modifica per rendere il tutto più funzionale ed ottimizzato; ma chiaramente vedi tu come meglio procedere.
Ci sono comunque diversi punti poco chiari nella tua richiesta.
- La ricerca deve essere effettuata solo in base al contenuto dell'elemento con classe "room"?
Qui hai usato questa roba:
codice:
$(".rigaEven:contains("+text+")").show();
$(".rigaOdd:contains("+text+")").show();
Sembrerebbe che tu stia "estendendo" la ricerca in base a qualsiasi contenuto degli elementi .rigaEven e .rigaOdd, cioè anche ai vari elementi figli a prescindere che siano .room o meno. Le tue indicazioni si riferivano però solo a tale elemento .room. 
Nel mio esempio ho infatti filtrato solo per gli elementi .room.
- I doppi apici nel testo degli elementi .room, sono lì per una qualche dimenticanza o devono proprio esserci?
codice:
<p class='room'>"Aula x"</p>
...
<p class='room'>"Aula xlll"</p>
Se devono esserci, la query di ricerca deve essere scritta anch'essa con i doppi apici, oppure deve essere "tollerante"?
Cioè se nel campo di ricerca scrivo Aula x (senza apici), ma nell'html è specificato come "Aula x" (con gli apici), normalmente tale risultato sarà escluso.
Nel mio esempio, come puoi vedere, ho inserito delle funzioni per limitare i "danni" da errori umani. In particolare Ho fatto un trim() (che elimina eventuali spazi aggiuntivi ad inizio o fine stringa), e ho convertito tutto in minuscolo, con toLowerCase(), i termini da comparare.
In questo modo c'è un maggiore grado di "tolleranza", ma non ho previsto nulla per eventuali apici aggiuntivi; tant'è che li ho eliminati dall'html.
La mia è giusto una constatazione in base ha ciò che hai postato, poi vedi tu come hai organizzato la cosa.
- Se i filtri da effettuare sono "obbligati" e devono agire su un numero limitato di termini di ricerca (come nel caso del nome delle aule), non sarebbe più appropriato l'uso di una select (o un elemento datalist), dove riportare l'elenco dei termini selezionabili, anziché un input a "inserimento libero"?
Con un input si impiega più tempo per digitare l'intera query di ricerca.
Con una select esegui qualche semplice click. Ancora meglio col datalist, un sorta di combobox con autocompletamento.
L'uso di un input può essere soggetto a diversi errori umani di digitazione.
Con una select hai delle scelte obbligate senza incappare in probabili errori che comprometterebbero i risultati, come un'apice in più o in meno.
Con un input, se si vuole effettuare un filtro combinato (ad esempio "Aula A, Aula C, Aula X") si dovrebbe sviluppare un sistema che interpreti opportunamente la query e identifichi i vari termini. Una select (o datalist) potrebbe invece essere impostata anche per una selezione multipla.
Chiaramente, non conoscendo il contesto, restano giusto dei consigli. Poi vedi tu come meglio procedere.
Rispondi quotando
Originariamente inviata da shaun87
