1. Unduh jquery-latest.js, JSuggest.js dan JSuggest.css
Kode sumber JSuggest.js adalah sebagai berikut
Copy kode kodenya sebagai berikut:
/**
*
* Deskripsi: Kotak prompt drop-down JSuggest
*/
fungsi JSuggest(){
// Kotak tarik-turun DIV
ini.div = null;
//ul di bawah DIV
ini.ul = null;
//Kotak masukan teks
ini.masukan = null;
// Objek LI dipilih oleh DIV saat ini
this.current_li = null;
/**
* Sembunyikan kotak prompt drop-down
*/
ini.sembunyikan = fungsi(){
this.div.style.visibility = "tersembunyi";
}
/**
* Tampilkan kotak prompt drop-down
*/
ini.tampilkan = fungsi(){
this.div.style.visibility = "terlihat";
}
/**
* Status kotak prompt drop-down
*/
ini.status = fungsi(){
if (this.div.style.visibility == "terlihat"){
kembali benar;
}
kembali salah;
}
/**
* Atur LI yang dipilih oleh DIV saat ini
*/
this.setCurrent_li = fungsi(li, obj){
var co = obj.current_li;
jika (bersama != batal){
co.className = "";
}
li.className = "li_index";
obj.current_li = li;
}
/**
* Inisialisasi Saran
*
* input_id: ID kotak input
* defHeight: tinggi kotak prompt drop-down (Anda juga tidak bisa menyediakannya)
*/
this.init = fungsi(input_id, defHeight){
this.input = dokumen.getElementById(input_id);
//ini.input.autocomplete = "mati";
var kiri = ini.input.offsetLeft;
var top = ini.input.offsetTop;
var lebar = ini.input.offsetWidth;
var tinggi = ini.input.offsetHeight;
var p=ini.input.offsetParent;
sementara(p!= batal){
kiri+=p.offsetKiri;
top+=p.offsetTop;
p=p.offsetParent;
}
atas+= tinggi;
if(defHeight==null || defHeight==0){
tinggi = 150;
}kalau tidak{
tinggi = defTinggi;
}
this.input.nilai = "";
var obj = ini;
this.input.onkeydown = fungsi(evt){
obj.onkeydown(evt, obj);
}
this.div = dokumen.createElement("div");
this.div.style.width = lebar + "px";
this.div.style.height = tinggi + "px";
this.div.style.left = kiri + "px";
this.div.style.top = atas + "px";
this.ul = dokumen.createElement("ul");
this.div.appendChild(ini.ul);
this.div.className = "jsuggest";
document.body.appendChild(ini.div);
}
/**
* Hapus semua LI di UL di bawah DIV
*/
ini.hapus = function(){
this.current_li = null;
while(ini.removeLI());
}
/**
* Hapus LI di UL di bawah DIV
*/
ini.hapusLI = fungsi(){
var node = this.ul.childNodes;
untuk(var n dalam simpul){
if (simpul[n] != null && simpul[n].nodeName == "LI"){
// peringatan(simpul[n].innerHTML);
this.ul.removeChild(simpul[n]);
kembali benar;
}
}
kembali salah;
}
/**
* Buat LI di DIV
*/
ini.buat = fungsi(item){
ini.hapus();
var li_item = item.split(",");
untuk(var i di li_item){
//peringatan(li_item[i]);
var li = dokumen.createElement("li");
li.innerHTML = li_item[i];
var obj = ini;
li.onmousedown = fungsi(){
obj.onmousedown(ini, obj);
}
li.onmouseover = ini.onmouseover;
li.onmouseout = ini.onmouseout;
this.ul.appendChild(li);
}
ini.tampilkan();
}
/**
* Acara pers kotak teks
*/
this.onkeydown = fungsi(evt, obj){
jika (!obj.status()){
kembali salah;
}
if (!evt && window.event)
{
evt = jendela.acara;
}
var kunci = evt.keyCode;
//var KEYUP = 38;
//var KUNCI BAWAH = 40;
//var KEYENTER = 13;
var ob = obj;
jika (kunci == 38){
obj.upKeySelected();
}lainnya jika (kunci == 40){
obj.downKeySelected();
}lainnya jika (kunci == 13 || kunci == 27){
obj.hide();
}
}
ini.getCurrentLiIndex = fungsi(){
if(ini.saat ini_li == null){
kembali -1;
}
var node = this.ul.childNodes;
untuk(var n dalam simpul){
jika (simpul[n].nodeName == "LI"){
if(node[n] == this.current_li){
kembali n;
}
}
}
}
this.getLi = fungsi(indeks){
var node = this.ul.childNodes;
untuk(var n dalam simpul){
if (simpul[n].nodeName == "LI" && n == indeks){
this.setCurrent_li(simpul[n], ini);
simpul kembali[n];
}
}
}
this.upKeySelected = fungsi(){
var num = ini.getCurrentLiIndex();
jika (angka != -1 && angka > 0){
nomor--;
var node = ini.getLi(angka);
this.setCurrent_li(simpul, ini);
this.input.value = node.innerHTML;
}
}
this.downKeySelected = fungsi(obj){
var num = ini.getCurrentLiIndex();
jika (angka == -1){
angka = 0;
}kalau tidak {
nomor++;
if (num >= this.ul.childNodes.length) kembali salah;
}
var node = ini.getLi(angka);
this.setCurrent_li(simpul, ini);
this.input.value = node.innerHTML;
}
/**
* Acara pers mouse DIV
*/
this.onmousedown = fungsi(thiz, obj){
obj.setCurrent_li(ini, obj);
obj.input.value = thiz.innerHTML;
obj.hide();
}
/**
* Acara pergerakan mouse DIV
*/
ini.onmouseover = fungsi(){
if (ini.namakelas != "li_index"){
this.className = "li_check";
}
}
/**
* Acara keluar mouse DIV
*/
ini.onmouseout = fungsi(){
if (ini.namakelas == "li_check"){
ini.namakelas = "";
}
}
}
var jsuggest = JSuggest baru();
halaman 2.jsp
Copy kode kodenya sebagai berikut:
<input id="text" name="text" type="text" onkeyup="go(event, this.value);"/>
<skrip tipe="teks/javascript">
j(dokumen).siap(fungsi(){
//Inisialisasi JSUGGEST
jsuggest.init("teks");
//Atau gunakan metode berikut untuk mengatur ketinggian kotak drop-down
//jsuggest.init("teks",200);
})
fungsi go(peristiwa, nilai){
acara= acara ? acara : (jendela.acara ? jendela.acara : argumen[0]);
var url = "url?suggestInput="+encodeURIComponent(value);//url adalah tindakan tertentu atau alamat jsp, dll., dan nilai yang dikembalikan adalah string yang dipisahkan koma
goSuggestInput(acara,url,nilai);
}
fungsi goSuggestInput(evnet,url,nilai){
jika (nilai == ""){
//Sembunyikan kotak drop-down jika kotak masukan kosong
jsuggest.hide();
kembali salah;
}
// Pastikan evt adalah event yang valid
if (!evnet && window.event)
{
evnet = jendela.acara;
}
var kunci = evnet.keyCode;
if (kunci == 38 || kunci == 40 || kunci == 13 || kunci == 27){
kembali salah;
}
j.ajax({
ketik: "postingan",
url:url,
tipe data: "teks",
tembolok: "salah",
sebelumKirim: fungsi(XMLHttpRequest){
},
sukses: fungsi(data, status teks){
//Tambahkan data ke kotak drop-down
jsuggest.buat(data);
},
lengkap: fungsi(XMLHttpRequest, textStatus){
},
kesalahan: fungsi(){
alert("Maaf, server sedang sibuk!");
}
});
}
</skrip>