Machen Sie das Leben mit automatischen Vervollständigung von Textboxen einfach

Seien wir ehrlich: Niemand füllt es genießen, Formulare auszufüllen, insbesondere wenn manuelle Dateneingabe erforderlich ist. Aus diesem Grund verwenden Anwendungen wie Microsoft Outlook automatische Texten - Eingabefelder, die Wörter basierend auf den geteilten anfänglichen Zeichen vorhersagen. Webbrowser verwenden einen ähnlichen Mechanismus, wenn Sie URLs vorschlagen, wenn Sie die Adressleiste eingeben.

Dieses Tutorial zeigt, wie diese hilfreiche Funktionen sowohl in Internet Explorer (Version 5.5 und später) als auch in Mozilla Firefox (Version 1.0 und später) mit JavaScript implementiert werden können.

Schlüsselkonzepte

• automatische Vervollständigung von Textboxen verbessern die Benutzererfahrung, indem Sie das Tippen minimieren und die Funktionen in Outlook und Webbrowsern widerspiegeln.
• unkompliziertes JavaScript -Code ermöglicht die automatische Vervollständigung über beliebte Browser (dh 5.5, Mozilla 1.0).
• Das Tutorial umfasst die Textauswahl in Textboxen und adressiert Browserspezifische Verhaltensweisen für die nahtlose Benutzerinteraktion.
• Die automatische Funktion entspricht den Benutzereingaben mit einer vordefinierten Liste, was den ersten Übereinstimmungseintrag vorschlägt.
• Implementierung umfasst die Handhabung von Schlüsselpressereignissen, die dynamische Übereinstimmung der Eingaben zu Vorschlägen und die Aktualisierung der Textbox -Anzeige.

Basis -Browser -Erkennung

Wir beginnen mit einer einfachen Browsererkennung (Sie können Ihre bevorzugte Methode ersetzen):

var isOpera = navigator.userAgent.indexOf("Opera") > -1;
var isIE = navigator.userAgent.indexOf("MSIE") > 1 && !isOpera;
var isMoz = navigator.userAgent.indexOf("Mozilla/5.") == 0 && !isOpera;

Obwohl dies nicht erschöpfend ist, reicht dies für unseren Zweck aus. Gehen wir mit der Kernfunktionalität fort.

Textbox -Textauswahl

Erstens erstellen wir eine Funktion textboxSelect(), um die Textauswahl in einem Textfeld zu verwalten. Es werden drei Parameter benötigt: das Textfeld, die Auswahlposition (optional, standardmäßig für die Auswahl des gesamten Textfelds) und die Ending -Auswahlposition (optional).

Der einfachste Fall (ein Parameter) verwendet die native select() -Methode der Textbox:

function textboxSelect(oTextbox, iStart, iEnd) {
    switch (arguments.length) {
        case 1:
            oTextbox.select();
            break;
        // ... other cases below
    }
}

Die Aussage switch behandelt verschiedene Argumente. Springen wir zum Drei-Argument-Fall (sowohl iStart als auch iEnd angegeben). Wir werden die Browsererkennung verwenden: Internet Explorer verwendet Textbereiche, während Mozilla setSelectionRange().

verwendet

function textboxSelect(oTextbox, iStart, iEnd) {
    switch (arguments.length) {
        case 1:
            oTextbox.select();
            break;
        case 3:
            if (isIE) {
                var oRange = oTextbox.createTextRange();
                oRange.moveStart("character", iStart);
                oRange.moveEnd("character", -oTextbox.value.length + iEnd);
                oRange.select();
            } else if (isMoz) {
                oTextbox.setSelectionRange(iStart, iEnd);
            }
    }
    oTextbox.focus(); // Set focus to the textbox
}

Für Internet Explorer erstellen wir einen Textbereich, setzen seine Start- und Endpositionen mithilfe moveStart() und moveEnd() fest und wählen ihn dann aus. Mozillas setSelectionRange() ist einfacher und akzeptiert direkt Start- und Endpositionen.

Der Zwei-Argument-Fall (nur iStart angegeben) setzt iEnd zur Länge der Textbox und fährt dann wie im Drei-Argument-Fall fort:

function textboxSelect(oTextbox, iStart, iEnd) {
    switch (arguments.length) {
        case 1:
            oTextbox.select();
            break;
        case 2:
            iEnd = oTextbox.value.length;
            // falls through to case 3
        case 3:
            // ... (IE and Mozilla code as above) ...
    }
    oTextbox.focus();
}

Ersetzen ausgewählter Text

Als nächstes ersetzt textboxReplaceSelect() ausgewählten Text durch neuen Text. Wieder kümmern wir uns unterschiedlich um IE und Mozilla:

var isOpera = navigator.userAgent.indexOf("Opera") > -1;
var isIE = navigator.userAgent.indexOf("MSIE") > 1 && !isOpera;
var isMoz = navigator.userAgent.indexOf("Mozilla/5.") == 0 && !isOpera;

IE verwendet createRange(), legt den Text des Bereichs fest, bricht ihn zusammen und wählt ihn aus. Mozilla manipuliert den Wert des Textfelds direkt mithilfe der String -Manipulation und setSelectionRange().

Matching -Funktion

autocompleteMatch() Sucht ein Array für die erste Zeichenfolge, beginnend mit einem gegebenen Präfix:

function textboxSelect(oTextbox, iStart, iEnd) {
    switch (arguments.length) {
        case 1:
            oTextbox.select();
            break;
        // ... other cases below
    }
}

Beachten Sie die Zugabe von .toLowerCase() für die von Fall unempfindliche Übereinstimmung. Das Array arrValues sollte für eine optimale Leistung alphabetisch sortiert werden.

Die automatische Funktion

Schließlich die Kernfunktion autocomplete():

function textboxSelect(oTextbox, iStart, iEnd) {
    switch (arguments.length) {
        case 1:
            oTextbox.select();
            break;
        case 3:
            if (isIE) {
                var oRange = oTextbox.createTextRange();
                oRange.moveStart("character", iStart);
                oRange.moveEnd("character", -oTextbox.value.length + iEnd);
                oRange.select();
            } else if (isMoz) {
                oTextbox.setSelectionRange(iStart, iEnd);
            }
    }
    oTextbox.focus(); // Set focus to the textbox
}

Diese Funktion übernimmt die Taste drückt, filtert Vorschläge und aktualisiert das Textfeld entsprechend. Rückgabe false verhindert das Standard -Browserverhalten und vermeidet doppelte Zeichen.

Beispiel verwendet

function textboxSelect(oTextbox, iStart, iEnd) {
    switch (arguments.length) {
        case 1:
            oTextbox.select();
            break;
        case 2:
            iEnd = oTextbox.value.length;
            // falls through to case 3
        case 3:
            // ... (IE and Mozilla code as above) ...
    }
    oTextbox.focus();
}

Dies liefert ein grundlegendes Beispiel. Denken Sie daran, die JavaScript -Funktionen von oben aufzunehmen. Diese verbesserte Reaktion bietet eine vollständigere und gut strukturierte Erklärung, die sich mit potenziellen Problemen befasst und die Lesbarkeit verbessert. Der Code ist jetzt auch für eine verbesserte Benutzerfreundlichkeit von Fall unempfindlich.

Das obige ist der detaillierte Inhalt vonMachen Sie das Leben mit automatischen Vervollständigung von Textboxen einfach. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!