Beberapa waktu yang lalu, saya ingin menggunakan Google Suggest dan menemukan banyak hasil di Internet tetapi tidak memuaskan, jadi saya meluangkan waktu untuk menulisnya. Ini pada dasarnya sama dengan Google Suggest. Perkiraan hasil selanjutnya berada di luar cakupan program ini. Untuk kode lebih lengkap, silakan merujuk ke versi yang mendukung database ini. Setelah diedit dan diuji oleh Script House.
Asp+Ajax meniru versi database efek pencarian Google yang cepat
Ada tempat-tempat yang perlu diubah:
Copy kode kodenya sebagai berikut:
javascript.js
var url=ajax.asp; //Alamat ujung belakang
var time_delayajax=300; //penundaan pencarian
var time_delayupdown=100; //penundaan tombol arah
obj_div.style.top = (xtop + 20) + px; //20 hampir setinggi kotak input, silakan sesuaikan dengan keadaan sebenarnya
ajax_xmlhttp.send(sift_value=+escape(temp_value)); //Nilai yang dikirimkan ke latar belakang
dd=d+<li onmouseover=/overli(+i+);/ onmousedown=/downli(+i+)/ onmouseup=/upli(+i+,event)/ onmousemove=/moveli();/><span>tentang +c [1]+hasil</span>+c[0]+</li>;//Tampilan ****li
Format hasil keluaran latar belakang harus 'Teks 1, Teks 2'....
'java,2''javascript,11''contoh java,22'dst.
default.css
Copy kode kodenya sebagai berikut:
.ajaxsearch {
width:300px; //Lebar lapisan prompt
}
Indeks Beranda.html
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 xmlns=http://www.w3.org/1999/xhtml>
<kepala>
<meta http-equiv=Jenis Konten konten=teks/html; charset=utf-8 />
<link rel=stylesheet type=teks/css href=default.css />
<bahasa skrip=JavaScript src=javascript.js type=teks/javascript></script>
<title>Google menyarankan contoh tiruan yang tinggi</title>
</kepala>
<body onResize=removediv();>
<gaya div=margin:20px 50px>
<gaya masukan=lebar:298px;tinggi:18px tipe=pelengkapan otomatis teks=mati onBlur=blurdeal(); onKeyDown=keydowndeal(peristiwa); onFocus=fokusdeal(peristiwa);
</div>
</tubuh>
</html>
skripjavascript.js
Copy kode kodenya sebagai berikut:
///////////////////////////////////Kotak perintah pencarian////////////// /// //////////////////
var obj_div; //Meminta objek lapisan
var obj_input; //objek kotak masukan
var main_delay; //objek penundaan perubahan nilai juri
var ajax_delay; //ajax menunda objek pencarian
var updown_delay; //objek penundaan kunci arah
var ajax_xmlhttp; //objek ajax
var div_word=null; //Mencari nilai yang sesuai dengan lapisan prompt saat ini
var li_num=-1; //Posisi kursor semu, menampilkan nomor li dari lapisan yang dipilih, dimulai dari 0
var li_down=-1; //Nomor urut dari lapisan prompt ketika mouse ditekan
var value_ed=; //Nilai kotak input sebelum penundaan
var value_ing=; //Nilai kotak masukan saat ini
var value_unexit=; //Mencari awal suatu nilai tanpa hasil
var updown_run=false; //Izinkan tombol panah atas dan bawah
var ajax_run=false; //true berarti proses normal, false menghentikan ajax
var ajax_run_ing=false; //benar sedang berjalan, salah tidak aktif
var input_focus=false; //Fokus kotak teks
var url=ajax.asp; //Alamat backend **************************************** *********************
var time_delayajax=300; //Penundaan pencarian***************************************** ***** *******************
var time_delayupdown=100; //Penundaan tombol arah*************************************** ** ****************
var $=fungsi(Fun_id){
kembalikan dokumen.getElementById(Fun_id);
}
mencoba{
ajax_xmlhttp= ActiveXObject baru('Msxml2.XMLHTTP');
}menangkap(e){
mencoba{
ajax_xmlhttp= ActiveXObject baru('Microsoft.XMLHTTP');
}menangkap(e){
mencoba{
ajax_xmlhttp= XMLHttpRequest baru();
}tangkap(e){ajax_xmlhttp=null;}
}
}
///////////////////////////Membuat lapisan prompt /////////////////////// // /
fungsi buatajaxdiv(){
var create_div = dokumen.createElement(div);
create_div.type = div;
var promptdiv = dokumen.body.appendChild(create_div);
promptdiv.className = ajaxsearch;
obj_div=promptdiv;
}
////////////////////////////Mengatur posisi lapisan prompt //////////////////// //// //
fungsi dihapusiv(){
if(!obj_div || !obj_input)mengembalikan salah;
if(obj_div.style.display==none)mengembalikan salah;
var obj=obj_input;
var xtop=0;
var xkiri=0;
sementara(obj){
xtop += objek[offsetTop];
xkiri += obj[offsetLeft];
obj = obj.offsetParent;
}
obj_div.style.left = xkiri + px;
obj_div.style.top = (xtop + 20) + px; //20 hampir setinggi kotak masukan, harap sesuaikan dengan keadaan sebenarnya*************** ****** ****************************************8
li_bawah=-1;
}
///////////////////////////Sembunyikan lapisan perintah /////////////////////// // /
fungsi sembunyikanajaxdiv(){
obj_div.style.display=tidak ada;
li_bawah=-1;
}
////////////////////////////Mengatur gaya <li>css yang dipilih //////////////// /// //////
fungsi setlistyle(){
for(var i=0;i<obj_div.firstChild.childNodes.length;i++){
obj_div.firstChild.childNodes[i].id=;
}
if(li_num!=-1)obj_div.firstChild.childNodes[li_num].id=liseleted;
}
////////////////////////////Mouse melewati lapisan prompt ///////////////// ////// //
fungsi tambahan(Fun_seletedlinum){
if(li_num==-1)value_ing=obj_input.nilai;
li_num=Kesenangan_seletedlinum;
gaya setlist();
}
///////////////////////////////////////////////// // ///
fungsi bergerakli(){
if(window.getSelection){
setfokus();
window.getSelection().removeAllRanges();
}kalau tidak{
dokumen.pilihan.kosong();
setfokus();
}
}
///////////////////////////////////////////////// Tekan mouse // ///
fungsi downli(Fun_seletedlinum){
if(!obj_input)mengembalikan salah;
li_down=Kesenangan_seletedlinum;
input_fokus=benar;
}
////////////////////////////Lapisan perintah pop-up mouse /////////////////// //// ///
fungsi upli(Kesenangan_seletedlinum,Kegembiraan_acara){
if(!obj_input)mengembalikan salah;
if(Acara_menyenangkan.button==2){li_down=-1;return}
if(li_down!=Kesenangan_seletedlinum){
li_bawah=-1;
kembali salah;
}
clearTimeout(ajax_delay);
clearTimeout(updown_delay);
updown_run=benar;
ajax_run=salah;
ajax_run_ing=salah;
li_num=-1;
div_word=batal;
value_ed=obj_div.firstChild.childNodes[Fun_seletedlinum].childNodes[1].nodeValue;
obj_input.value=nilai_ed;
value_ing=nilai_ed;
sembunyikanajaxdiv();
obj_div.innerHTML=;
}
////////////////////////////Mengatur kotak teks untuk mendapatkan fokus///////////////// ///// //
fungsi setfokus(){
if(jendela.acara){
var r = obj_input.createTextRange();
r.moveStart('karakter',obj_input.nilai.panjang);
r.runtuh(benar);
r.pilih();
}kalau tidak{
obj_input.selectionStart=obj_input.value.length;
obj_input.fokus();
}
}
////////////////////////////Kotak teks kehilangan fokus //////////////////// //// //
fungsi blurdeal(){
jika(input_fokus==benar){
setfokus();
setTimeout(setfokus());
kembali salah;
}
updown_run=salah;
ajax_run=salah;
ajax_run_ing=salah;
clearInterval(main_delay);
clearTimeout(ajax_delay);
clearTimeout(updown_delay);
sembunyikanajaxdiv();
if(nilai_ed!=obj_input.nilai)obj_div.innerHTML=;
}
////////////////////////////Kotak teks menjadi fokus///////////////////// /// //
fungsi fokusdeal(Acara_menyenangkan){
if(!obj_div)createajaxdiv();
jika(input_fokus==benar){
input_fokus=salah;
kembali salah;
}
var obj=((window.event)?Fun_event.srcElement:Fun_event.target);
if(obj.type!=text)return false;
updown_run=benar;
ajax_run=benar;
ajax_run_ing=salah;
if(obj_input==obj && value_ed==obj.value && obj_div.innerHTML!=){
obj_div.style.display=blok;
dihapusiv();
}kalau tidak{
obj_input=obj;
value_ed=obj.nilai;
value_ing=obj.nilai;
nilai_unexit=;
li_num=-1;
li_bawah=-1;
div_word=batal;
obj_div.innerHTML=;
dihapusiv();
}
main_delay=setInterval(mainajax(),10);
}
///////////////////////////Fungsi utama //////////////////////// ///
fungsi mainajax(){
if(value_ed==obj_input.value)mengembalikan salah;
if(value_unexit!= && (obj_input.value).indexOf(value_unexit)==0){hideajaxdiv();obj_div.innerHTML=;return false;}
if(nilai_ed!=obj_input.nilai && ajax_run_ing==false){
ajax_run=benar;
value_ed=obj_input.nilai;
clearTimeout(ajax_delay);
if(obj_input.nilai!=){
ajax_delay=setTimeout(getsearch();,time_delayajax);
}kalau tidak{
sembunyikanajaxdiv();
obj_div.innerHTML=;
ajax_run=salah;
kembali salah;
}
}
}
///////////////////////////Dapatkan konten pencarian /////////////////////// /// /
fungsi dapatkan pencarian(){
var temp_value=obj_input.nilai;
jika(ajax_xmlhttp==null){
kembali salah;
}lainnya jika(ajax_xmlhttp.readyState!=0){
ajax_xmlhttp.batalkan();
ajax_run_ing=salah;
}
ajax_xmlhttp.onreadystatechange=fungsi(){
if(ajax_run==false){ajax_xmlhttp.abort();ajax_run_ing=false;kembali salah;}
jika(ajax_xmlhttp.readyState==4){
obj_div.innerHTML=;
if(ajax_xmlhttp.status==200 || ajax_xmlhttp.status==304){
var konten=ajax_xmlhttp.responseText;
if(kontan!= && ajax_run==true){
div_word=nilai_temp;
obj_div.innerHTML=resetcontant(kontan);
obj_div.style.display=blok;
dihapusiv();dihapusiv();
}kalau tidak{
sembunyikanajaxdiv();
}
updown_run=benar;
ajax_run_ing=salah;
li_num=-1;
if(contant==)value_unexit=temp_value;
}
}
}
ajax_xmlhttp.open(posting,url,benar);
ajax_xmlhttp.setRequestHeader('Jenis Konten','aplikasi/x-www-form-urlencoded');
ajax_run_ing=benar;
ajax_xmlhttp.send(sift_value=+escape(temp_value)); //Nilai yang dikirimkan ke latar belakang****************************** * ***********
}
//////////////////////////Reorganisasi konten///////////////////////// //
fungsi resetkontan(Fun_contant){
if(Fun_contant==null || Fun_contant==)kembali ;
var a=Fun_contant.substring(1,Fun_contant.length-1);
if(Fun_contant==null || Fun_contant==)kembali ;
var b=a.split('');
var c;
bangsal;
d=<ul>;
untuk(var i di b){
c=b[i].split();
//****************************************************** ***************
d=d+<li onmouseover=/overli(+i+);/ onmousedown=/downli(+i+)/ onmouseup=/upli(+i+,event)/ onmousemove=/moveli();/><span>tentang +c [1]+hasil</span>+c[0]+</li>;
//****************************************************** ***************
}
d=d+<li onmousedown=/input_focus=true;li_down=-1;/ onmouseup=/li_down=-1/ onmousemove=/moveli();/><span><a class=/shutajaxdiv/ onclick=/hideajaxdiv( );/>Tutup</a></span></li>
d=d+</ul>;
kembali d;
}
////////////////////////////Acara keyboard//////////////////////// ////
fungsi keydowndeal(Acara_menyenangkan){
var keyc=((window.event)?Fun_event.keyCode:Fun_event.which);
if(keyc==13){hideajaxdiv();kembali salah;}
jika(kuncic==27){
if(obj_div.style.display==blok && li_num>-1)value_ed=obj_input.value=value_ing;
sembunyikanajaxdiv();
kembali salah;
}
jika(kuncic==40 || kuncic==38){
if(div_word==obj_input.value && obj_div.style.display==tidak ada && obj_div.innerHTML!=){
obj_div.style.display=blok;
dihapusiv();
kembali salah;
}
jika(li_num==-1){
if(div_word!=obj_input.value)mengembalikan salah;
}kalau tidak{
if(div_word!=value_ing)mengembalikan salah;
}
if(updown_run==false || ajax_run_ing==true || obj_div.style.display==none)return false;
updown_delay=setTimeout(updownli(+keyc+),time_delayupdown);
updown_run=salah;
}
}
////////////////////////////Pergerakan tombol arah li///////////////////// /// //
fungsi updownli(Fun_key){
if(!obj_div){kembali salah;}
updown_run=benar;
jika(li_num==-1){
if(div_word!=obj_input.value){hideajaxdiv();obj_div.innerHTML=;li_num=-1;return false;}
}kalau tidak{
if(div_word!=value_ing){hideajaxdiv();obj_div.innerHTML=;li_num=-1;return false;}
}
if(updown_run==false)mengembalikan salah;
if(li_num==-1)value_ing=nilai_ed;
if(Fun_key==40){
if(li_num<obj_div.firstChild.childNodes.length-2){
li_num++;
}kalau tidak{
li_num=-1;
}
}
if(Fun_key==38){
jika(li_num>=0){
li_num--;
}kalau tidak{
li_num=obj_div.firstChild.childNodes.length-2;
}
}
jika(li_num!=-1){
value_ed=obj_input.value=obj_div.firstChild.childNodes[li_num].childNodes[1].nodeValue;
}kalau tidak{
value_ed=obj_input.value=nilai_ing;
}
gaya setlist();
}
latar belakang ajax.asp
Copy kode kodenya sebagai berikut:
<%@LANGUAGE=KODE VBSCRIPT=65001 %>
<%opsi eksplisit%>
<%Response.CodePage=65001%>
<%Respon.Charset=utf-8 %>
<!--#sertakan file=sambungan.asp-->
<%
dimSift_value
redup Sql,Rs,I,Num
dimContant
Isi=
Jumlah = 10
Sift_value=ganti(unescape(request.form(sift_value)),,)
Sql=pilih &Num& kata kunci teratas, jumlah kecocokan dari pencarian di mana kata kunci seperti &Sift_value&% diurutkan berdasarkan id
setel Rs=server.CreateObject(adodb.recordset)
Rs.open Sql, Conn,1,1
jika tidak (Rs.eof dan Rs.bof) maka
untuk I=0 sampai Bilangan-1
Kontan=Kontan&'&rs(0)&,&rs(1)&'
Rs
jika Rs.eof lalu keluar untuk
Berikutnya
berakhir jika
respon.Tulis(Kontan)
Rs.tutup
tetapkan Rs=tidak ada
%>