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>
<kepala>
<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>
<bahasa skrip=javascript>
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>
<metode formulir=nama postingan=myForm1>
Warna: <tipe masukan=nama teks=warna id=warna onkeyup=findColors();
</bentuk>
<iddiv=munculan>
<ul id=warna_ul></ul>
</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>
<kepala>
<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>
<skrip bahasa=javascript src=jquery.min.js></script>
<bahasa skrip=javascript>
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>
<metode formulir=nama postingan=myForm1>
Warna: <tipe masukan=nama teks=warna id=warna onkeyup=findColors();
</bentuk>
<iddiv=munculan>
<ul id=warna_ul></ul>
</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 = ;
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);
%>