Ogni sito web ha bisogno di una barra di ricerca attraverso la quale un utente può cercare il contenuto della loro preoccupazione in quella pagina. Una barra di ricerca di base può essere effettuata utilizzando solo HTML, CSS e JavaScript. Gli algoritmi di ricerca avanzata cercano molte cose come i contenuti correlati e quindi mostrano i risultati. Quello che faremo cercherà sottostringhe in una stringa.
HTML
In questa sezione, scriveremo parte HTML del codice. In HTML, ci limiteremo a collegare i nostri fogli di stile e il nostro file JavaScript., Il tag di input viene utilizzato per la creazione della barra di ricerca e include diversi attributi come tipo, segnaposto, nome. Abbiamo anche bisogno di un elenco di elementi che conterrà diversi nomi di animali che ci permetterà di cercare gli animali attraverso questo. Le classi e gli ID utilizzati nei tag saranno definiti nel foglio di stile di seguito.
Output:
CSS
Sebbene il tag di input sopra riportato e l’elenco ordinato siano a posto, ha ancora bisogno di uno stile., Per lo stile della barra di ricerca, vengono aggiunti alcuni margini e padding per renderlo pulito. Le misure sono in percentuale in modo che si regola se utilizzato in qualsiasi dimensione dello schermo (Mobile, Desktop, ecc). Transizione Webkit viene utilizzato per modificare la larghezza della barra di ricerca quando si fa clic. La larghezza iniziale della barra di ricerca è del 30%, ma quando viene cliccato, cambierà al 70% con una transizione ease-in ease-out di 0,15 secondi.
Output
Dopo aver aggiunto lo Styling, la nostra pagina dovrebbe essere simile a questa.
Nota: se lo stile della tua pagina non cambia, assicurati che lo stile.,il file css si trova nella stessa cartella di index.HTML.
È ancora incompleto, poiché abbiamo ancora bisogno del JavaScript per completare la funzionalità di questa barra di ricerca.
JavaScript
Nel codice HTML della barra di ricerca, abbiamo dato all’input un id=”searchbar” e onkeyup abbiamo chiamato, la funzione “search_animal”. onkeyup chiama la funzione ogni volta che viene rilasciato un tasto sulla tastiera.
Per prima cosa otteniamo il nostro input usando getElementById. Assicurati di convertirlo in minuscolo per evitare la sensibilità al maiuscolo / minuscolo durante la ricerca. Una serie di documenti è memorizzata in x. Questo contiene ogni elenco che ha id = “animali”., Dopo di che viene eseguito un ciclo per verificare se innerHTML di ogni documento include la sottostringa di input se non lo fa, la proprietà display è impostata su ‘None’ in modo che sia invisibile sul front-end.
Output: