Ricerca dei termini presenti in una selectbox con Javascript

Corso jQuery
Creare applicazioni client-side col Framework jQuery

Scritto da Luca Ruggiero nella sezione Javascript

Grazie ad una semplice funzione Javascript è possibile digitare una parola o una frase all'interno di una casella di testo, ricercandola al contempo all'interno di una selectbox. Di seguito il codice Html del modulo che richiama all'evento onKeyUp sulla casella di testo la funzione Scrivi() che esamineremo in seguito:

<form name="modulo">
    <input type="text" name="cerca" onKeyUp="Scrivi()" style="width: 150;">
    <br>
    <select name="risultati" style="width: 150;">
        <option></option>
        <option>Asp</option>
        <option>Asp.NET</option>
        <option>Cgi</option>
        <option>Css</option>
        <option>Dhtml</option>
        <option>Html</option>
        <option>Java</option>
        <option>Javascript</option>
        <option>JScript</option>
        <option>Jsp</option>
        <option>Perl</option>
        <option>Php</option>
        <option>Sql</option>
        <option>VBScript</option>
        <option>Visual Basic</option>
        <option>Xhtml</option>
        <option>Xml</option>
    </select>
</form>
Di seguito il codice Javascript commentato dell'applicazione:
function Scrivi()
{
	var stringa, lunghezza;
    var scorri = -1;

    with (document.modulo)
    {
        stringa = cerca.value;
        lunghezza = stringa.length;

        // SE LA STRINGA DA RICERCARE E' MAGGIORE DI ZERO ESEGUO LA ROUTINE
        if (lunghezza > 0)
        {
            for (var i=0; i<risultati.options.length; i++)
            {
            // SE LA STRINGA E' PRESENTE RESTITUISCO UN RISULTATO AL VOLO
                if (scorri == -1 && risultati.options[i].text.toLowerCase().substring(0, lunghezza) == stringa)
                {
                    scorri = i;
                }
                else
                {
                    null;
                }
            }
        }
        else
        {
            scorri = 0;
        }

        // SCORRO LA SELECTBOX IN BASE AL VALORE RICHIESTO CON LA DIGITAZIONE
        risultati.selectedIndex = scorri;
    } 
}

I più cliccati della sezione Javascript

:: jQuery Validation: validazione di un form con jQuery (107.912)

:: Breve guida a jQuery (98.602)

:: Le espressioni regolari in Javascript (84.989)

:: Gestione delle stringhe in Javascript (74.986)

:: Stampare una pagina col Dhtml (42.850)

:: Inserire in automatico lo slash nel formato data gg/mm/aaaa (41.642)

:: Menu orizzontale dinamico in Dhtml (37.187)

:: Gli Array in Javascript (35.935)

:: Temporizzazioni Javascript (31.623)

:: Istruzion condizionali in Javascript: if e switch (28.943)

IN EVIDENZA
DOWNLOAD