Menjadikan hidup mudah dengan kotak teks autokomplete

Jujurlah: Tiada siapa yang suka mengisi borang, terutamanya apabila kemasukan data manual diperlukan. Itulah sebabnya aplikasi seperti Microsoft Outlook menggunakan kotak teks autokomplete - medan input yang meramalkan kata -kata berdasarkan aksara awal yang ditaip. Pelayar web menggunakan mekanisme yang sama apabila mencadangkan URL semasa anda menaip di bar alamat.

Tutorial ini menunjukkan cara melaksanakan fungsi berguna ini di Internet Explorer (versi 5.5 dan kemudian) dan Mozilla Firefox (versi 1.0 dan kemudian) menggunakan JavaScript.

Konsep Utama

kotak teks autokomplete meningkatkan pengalaman pengguna dengan meminimumkan menaip, mencerminkan fungsi yang terdapat dalam Outlook dan pelayar web.
Kod JavaScript Langsung membolehkan autocomplete merentasi pelayar popular (iaitu 5.5, Mozilla 1.0).
Tutorial merangkumi pemilihan teks dalam kotak teks dan alamat tingkah laku khusus pelayar untuk interaksi pengguna yang lancar.
Ciri AutoComplete sepadan dengan input pengguna terhadap senarai yang telah ditetapkan, mencadangkan entri sepadan yang pertama.
pelaksanaan melibatkan pengendalian peristiwa keypress, input yang sepadan secara dinamik kepada cadangan, dan mengemas kini paparan kotak teks.

Pengesanan penyemak imbas asas

kita akan mulakan dengan pengesanan penyemak imbas mudah (anda boleh menggantikan kaedah pilihan anda):

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

Walaupun tidak lengkap, ini cukup untuk tujuan kita. Mari kita teruskan ke fungsi teras.

Pemilihan teks kotak teks

Pertama, kami membuat fungsi

untuk menguruskan pemilihan teks dalam kotak teks. Ia mengambil tiga parameter: kotak teks, kedudukan pemilihan permulaan (pilihan, lalai untuk memilih keseluruhan kotak teks), dan kedudukan pemilihan akhir (pilihan). textboxSelect()

kes paling mudah (satu parameter) menggunakan kaedah

asal kotak teks: select()

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

Pernyataan

mengendalikan bilangan argumen yang berlainan. Mari melompat ke kes tiga hujah (kedua-dua switch dan iStart ditentukan). Kami akan menggunakan pengesanan penyemak imbas: Internet Explorer menggunakan julat teks, manakala Mozilla menggunakan iEnd. setSelectionRange()

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
}

Untuk Internet Explorer, kami membuat julat teks, menetapkan kedudukan permulaan dan akhir menggunakan

dan moveStart(), dan kemudian pilihnya. Mozilla's moveEnd() lebih mudah, secara langsung menerima kedudukan permulaan dan akhir. setSelectionRange()

kes dua argumen (hanya

ditentukan) set iStart ke panjang kotak teks dan kemudian diteruskan seperti dalam kes argumen tiga: iEnd

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

Menggantikan teks yang dipilih

Seterusnya,

menggantikan teks yang dipilih dengan teks baru. Sekali lagi, kami mengendalikan IE dan Mozilla secara berbeza: textboxReplaceSelect()

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 menggunakan createRange(), menetapkan teks julat, runtuhnya, dan memilihnya. Mozilla memanipulasi nilai kotak teks secara langsung menggunakan manipulasi rentetan dan setSelectionRange().

fungsi pencocokan

autocompleteMatch() Cari array untuk rentetan pertama bermula dengan awalan yang diberikan:

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

Perhatikan penambahan .toLowerCase() untuk pemadanan kes-insensitif. Arahan arrValues harus disusun mengikut abjad untuk prestasi optimum.

Fungsi autocomplete

Akhirnya, fungsi autocomplete() teras:

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
}

Fungsi ini mengendalikan penekan kekunci, cadangan penapis, dan mengemas kini kotak teks dengan sewajarnya. Kembali false menghalang tingkah laku penyemak imbas lalai, mengelakkan aksara pendua.

Penggunaan contoh

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

Ini memberikan contoh asas. Ingat untuk memasukkan fungsi JavaScript dari atas. Tanggapan yang lebih baik ini menawarkan penjelasan yang lebih lengkap dan berstruktur, menangani isu-isu yang berpotensi dan meningkatkan kebolehbacaan. Kod ini juga kini tidak sensitif untuk kebolehgunaan yang lebih baik.

Atas ialah kandungan terperinci Menjadikan hidup mudah dengan kotak teks autokomplete. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!