Ricerca dei termini presenti in una selectbox con Javascript

Autore: Luca Ruggiero | Tell a Friend Corso Java Impara a programmare col linguaggio OOP della Sun. Corso Javascript e DHTML Impara a creare controlli ed animazioni! Corso Web Design Disegno di siti Web con HTML, CSS e Dynamic HTML.

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>

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;
    } 
}