JavaScript mengimplementasikan kode efek kotak teks dengan perintah otomatis

Penulis：Eve Cole Waktu Pembaruan：2025-03-19 15:48:02

Gunakan JavaScript untuk membuat kotak teks dengan perintah otomatis. Teman yang membutuhkannya dapat merujuk ke sana. Contoh 1: Tulis implementasi AJAX secara langsung.

Klien:

Copy kode kodenya sebagai berikut:

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

<html>

<title>Ajax menyadari kotak teks prompt otomatis</title>

<gaya>

<!--

tubuh{

keluarga font:Arial, Helvetica, sans-serif;

ukuran font:12px; bantalan:0px; margin:5px;

}

bentuk{padding:0px; margin:0px;}

masukan{

/* Gaya kotak input pengguna */

keluarga font:Arial, Helvetica, sans-serif;

ukuran font:12px; batas:1px padat #000000;

lebar:200 piksel; bantalan:1 piksel; margin:0 piksel;

}

#munculan{

/* Gaya blok div kotak prompt */

posisi:mutlak; lebar:202px;

warna:#004a7e; ukuran font:12 piksel;

keluarga font:Arial, Helvetica, sans-serif;

kiri:41px; atas:25px;

}

#popup.tampilkan{

/* Menampilkan batas kotak prompt */

batas:1 piksel padat #004a7e;

}

#popup.sembunyikan{

/* Menyembunyikan batas kotak prompt*/

perbatasan: tidak ada;

}

/* Gaya kotak prompt*/

kamu{

gaya daftar: tidak ada;

margin:0 piksel; bantalan:0 piksel;

}

li.mouseOver{

warna-latar belakang:#004a7e;

warna:#FFFFFF;

}

li.mouseOut{

warna latar:#FFFFFF;

warna:#004a7e;

}

-->

</gaya>

var oInputField; //Mengingat digunakan di banyak fungsi

var oPopDiv; //Jadi berbentuk variabel global

var oWarnaUl;

var xmlHttp;

fungsi buatXMLHttpRequest(){

if(jendela.ActiveXObject)

xmlHttp = ActiveXObject baru(Microsoft.XMLHTTP);

lain jika(jendela.XMLHttpRequest)

xmlHttp = XMLHttpRequest baru();

}

fungsi initVars(){

//Inisialisasi variabel

oInputField = dokumen.forms[myForm1].warna;

oPopDiv = dokumen.getElementById(popup);

oColorsUl = dokumen.getElementById(colors_ul);

}

fungsi warna yang jelas(){

//Hapus konten perintah

for(var i=oColorsUl.childNodes.length-1;i>=0;i--)

oColorsUl.removeChild(oColorsUl.childNodes[i]);

oPopDiv.className = sembunyikan;

}

fungsi setWarna(warna_){

//Menampilkan kotak prompt, dan parameter yang diteruskan adalah array yang terdiri dari hasil yang cocok.

clearColors(); //Setiap kali Anda memasukkan huruf, hapus perintah awal sebelum melanjutkan.

oPopDiv.className = tampilkan;

var oLi;

for(var i=0;i<the_colors.length;i++){

//Menampilkan hasil prompt yang cocok kepada pengguna satu per satu

oLi = dokumen.createElement(li);

oColorsUl.appendChild(oLi);

oLi.appendChild(document.createTextNode(the_colors[i]));

oLi.onmouseover = fungsi(){

this.className = mouseOver; //Sorot saat mouse lewat

}

oLi.onmouseout = fungsi(){

this.className = mouseOut; //Kembalikan ke keadaan semula saat keluar

}

oLi.onclick = fungsi(){

//Ketika pengguna mengklik item yang cocok, setel kotak input ke nilai item tersebut

oInputField.value = this.firstChild.nodeValue;

clearColors(); //Hapus kotak prompt secara bersamaan

}

fungsi temukanWarna(){

initVars(); //Inisialisasi variabel

if(oInputField.nilai.panjang > 0){

createXMLHttpRequest(); //Kirim masukan pengguna ke server

var sUrl = 9-10.aspx?sColor= + oInputField.value + ×tamp= + Tanggal baru().getTime();

xmlHttp.open(DAPATKAN,sUrl,benar);

xmlHttp.onreadystatechange = fungsi(){

if(xmlHttp.readyState == 4 && xmlHttp.status == 200){

var hasil = Array baru();

if(xmlHttp.responseText.length){

hasil = xmlHttp.responseText.split(),;

setColors(aResult); //Menampilkan hasil server

}

kalau tidak

hapusWarna();

}

xmlHttp.kirim(null);

}

kalau tidak

clearColors(); //Hapus kotak prompt ketika tidak ada input (misalnya, pengguna menekan tombol del)

}

</skrip>

</kepala>

<tubuh>

Warna: <tipe masukan=nama teks=warna id=warna onkeyup=findColors();

</bentuk>

<iddiv=munculan>

</div>

</tubuh>

</html>

Sisi server (9-10.aspx):

Copy kode kodenya sebagai berikut:

<%@ Bahasa Halaman=C# ContentType=teks/html ResponseEncoding=gb2312 %>

<%@ Impor Namespace=Sistem.Data %>

Response.CacheControl = tanpa cache;

Response.AddHeader(Pragma,tanpa cache);

string sInput = Permintaan[sColor].Trim();

if(sInput.Panjang == 0)

kembali;

string sHasil = ;

string[] aColors = baru string[]{aliceblue,antiquewith,aquamarine,azure,beige,bisque,black,blanchedalmond,blue,blueviolet,kuningan,perunggu,coklat,burlywood,cadetblue,chartreuse,coklat,tembaga,karang,cornfloewrb lue, sutra jagung, cyan, biru tua, darkcyan, darkgoldenrod, darkgray, darkgreen, darkkhaki, darkmagenta, darkolivegreen, darkorchid, darkorenge, darkred, darksalmon, darkseagreen, darkslateblue, darkslate abu-abu,darkturquoise,darkviolet,deeppink,deepskyblue,dimgray,dodgerblue,feldspar,firebrick,floralwhite,forestgreen,fuchsia,gainsboro,emas,goldenrod,golenrod,gostwhite,abu-abu,hijau,hijau ellow, honeydew, hotpink, indianred, inen, ivory, khaki, lavender, lavenderblush, lawngreen, lemonchiffon, biru muda, lightcoral, lightcyan, lightgodenrod, lightgodenrod yellow, lightgray, lightgreen, l ightpink,lightsalmon,lightseagreen,lightskyblue,lightslateblue,lightslategray,lightsteelblue,light yellow,lime,limegreen,magenta,magenta,maroom,maroon,mediumaquamarine,mediumblue,medi umorchid,mediumpurpul,mediumseagreen,mediumslateblue,mediumspringgreen,mediumturquoise,mediumvioletred,midnightblue,mintcream,mistyrose,moccasin,navajowhite,navy,navyblue,oldlace,oli vedrab, oranye, anggrek, orengered, palegodenrod, palegreen, paleturquoise, palevioletred, papayawhip, peachpuff, peru, pink, plum, powderblue, ungu, kuarsa, merah, rosy brown, royalblue, saddle brown, sal mon, coklat berpasir, merah tua, hijau laut, kerang laut, sienna, perak, biru langit, abu-abu batu tulis, salju, hijau musim semi, biru baja, cokelat, thistle, tomat, pirus, ungu, merah ungu, gandum, asap putih, kuning, hijau kuning};

for(int i=0;i<aWarna.Panjang;i++){

if(aWarna[i].IndexOf(sInput) == 0)

sHasil += aWarna[i] + ,;

}

if(sResult.Length>0) //Jika ada kecocokan

sResult = sResult.Substring(0,sResult.Length-1); //Hapus angka terakhir

Response.Write(sResult);

Contoh 2: Diimplementasikan menggunakan jQuery.

Klien:

Copy kode kodenya sebagai berikut:

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

<html>

<title>JQuery mengimplementasikan kotak teks prompt otomatis</title>

<gaya>

<!--

tubuh{

keluarga font:Arial, Helvetica, sans-serif;

ukuran font:12px; bantalan:0px; margin:5px;

}

bentuk{padding:0px; margin:0px;}

masukan{

/* Gaya kotak input pengguna */

keluarga font:Arial, Helvetica, sans-serif;

ukuran font:12 piksel; batas:1 piksel padat #000000;

lebar:200 piksel; bantalan:1 piksel; margin:0 piksel;

}

#munculan{

/* Gaya blok div kotak prompt */

posisi:mutlak; lebar:202px;

warna:#004a7e; ukuran font:12px;

keluarga font:Arial, Helvetica, sans-serif;

kiri:41px; atas:25px;

}

#popup.tampilkan{

/* Menampilkan batas kotak prompt */

batas:1 piksel padat #004a7e;

}

/* Gaya kotak prompt*/

kamu{

gaya daftar: tidak ada;

margin:0 piksel; bantalan:0 piksel;

warna:#004a7e;

}

li.mouseOver{

warna-latar belakang:#004a7e;

warna:#FFFFFF;

}

-->

</gaya>

var oInputField; //Mengingat digunakan di banyak fungsi

var oPopDiv; //Jadi berbentuk variabel global

var oWarnaUl;

fungsi initVars(){

//Inisialisasi variabel

oInputField = $(#warna);

oPopDiv = $(#popup);

oWarnaUl = $(#warna_ul);

}

fungsi warna yang jelas(){

//Hapus konten perintah

oColorsUl.kosong();

oPopDiv.removeClass(tampilkan);

}

fungsi setWarna(warna_){

//Menampilkan kotak prompt, dan parameter yang diteruskan adalah array yang terdiri dari hasil yang cocok.

clearColors(); //Setiap kali Anda memasukkan huruf, hapus perintah awal sebelum melanjutkan.

oPopDiv.addClass(tampilkan);

for(var i=0;i<the_colors.length;i++)

//Menampilkan hasil prompt yang cocok kepada pengguna satu per satu

oColorsUl.append($(<li>+the_colors[i]+</li>));

oColorsUl.find(li).klik(fungsi(){

oInputField.val($(ini).teks());

hapusWarna();

}).melayang(

fungsi(){$(ini).addClass(mouseOver);},

function(){$(ini).removeClass(mouseOver);}

);

}

fungsi temukanWarna(){

initVars(); //Inisialisasi variabel

if(oInputField.val().panjang > 0){

//Dapatkan data asinkron

$.mendapatkan(14-10.aspx,{sColor:oInputField.val()},

fungsi(data){

var hasil = Array baru();

if(data.panjang > 0){

hasil = data.split();

setColors(aResult); //Menampilkan hasil server

}

kalau tidak

hapusWarna();

});

}

kalau tidak

clearColors(); //Hapus kotak prompt ketika tidak ada input (misalnya, pengguna menekan tombol del)

}

</skrip>

</kepala>

<tubuh>

Warna: <tipe masukan=nama teks=warna id=warna onkeyup=findColors();

</bentuk>

<iddiv=munculan>

</div>

</tubuh>

</html>

Sisi server (14-10.aspx):

Copy kode kodenya sebagai berikut:

<%@ Bahasa Halaman=C# ContentType=teks/html ResponseEncoding=gb2312 %>

<%@ Impor Namespace=Sistem.Data %>

Response.CacheControl = tanpa cache;

Response.AddHeader(Pragma,tanpa cache);

string sInput = Permintaan[sColor].Trim();

if(sInput.Panjang == 0)

kembali;

string sHasil = ;

for(int i=0;i<aWarna.Panjang;i++){

if(aWarna[i].IndexOf(sInput) == 0)

sHasil += aWarna[i] + ,;

}

if(sResult.Length>0) //Jika ada kecocokan

sResult = sResult.Substring(0,sResult.Length-1); //Hapus angka terakhir

Response.Write(sResult);