เมื่อก่อนฉันต้องการใช้ Google Suggest และพบผลลัพธ์มากมายบนอินเทอร์เน็ตแต่ยังไม่น่าพอใจ เลยใช้เวลาเขียนอยู่พักหนึ่ง โดยพื้นฐานแล้วผลลัพธ์ก็เหมือนกับ Google Suggest เลย โปรแกรมนี้ หากต้องการโค้ดที่สมบูรณ์ยิ่งขึ้น โปรดดูเวอร์ชันนี้ที่รองรับฐานข้อมูล หลังจากแก้ไขและทดสอบโดย Script House
Asp + Ajax เลียนแบบเวอร์ชันฐานข้อมูลเอฟเฟกต์พรอมต์การค้นหาของ Google
มีสถานที่ที่ต้องแก้ไข:
คัดลอกรหัสรหัสดังต่อไปนี้:
javascript.js
var url=ajax.asp; //ที่อยู่แบ็กเอนด์
var time_delayajax=300; //การค้นหาล่าช้า
var time_delayupdown=100; // ความล่าช้าของคีย์ทิศทาง
obj_div.style.top = (xtop + 20) + px; //20 เกือบจะสูงเท่ากับช่องป้อนข้อมูล โปรดปรับตามสถานการณ์จริง
ajax_xmlhttp.send(sift_value=+escape(temp_value)); //ค่าที่ส่งไปยังพื้นหลัง
dd=d+<li onmouseover=/overli(+i+);/ onmousedown=/downli(+i+)/ onmouseup=/upli(+i+,เหตุการณ์)/ onmousemove=/moveli();/><span>เกี่ยวกับ +c [1]+ผลลัพธ์</span>+c[0]+</li>;//แสดง ****li
รูปแบบผลลัพธ์เอาต์พุตพื้นหลังต้องเป็น 'ข้อความ 1, ข้อความ 2'....
'java,2''javascript,11''ตัวอย่าง java,22'etc
default.css
คัดลอกรหัสรหัสดังต่อไปนี้:
.ajaxsearch {
width:300px; //ความกว้างของเลเยอร์พรอมต์
-
Homeindex.html
คัดลอกรหัสรหัสดังต่อไปนี้:
<!DOCTYPE html สาธารณะ -//W3C//DTD XHTML 1.0 การเปลี่ยนผ่าน//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<หัว>
<meta http-equiv=เนื้อหาประเภทเนื้อหา=ข้อความ/html; charset=utf-8 />
<link rel=stylesheet type=text/css href=default.css />
<script language=JavaScript src=javascript.js type=text/javascript></script>
<title>Google แนะนำตัวอย่างการเลียนแบบสูง</title>
</หัว>
<body onResize=removediv();>
<div style=margin:20px 50px>
<input style=width:298px;height:18px type=text autocomplete=off onBlur=blurdeal(); onKeyDown=keydowndeal(event); onFocus=focusdeal(event);
</div>
</ร่างกาย>
</html>
Scriptjavascript.js
คัดลอกรหัสรหัสดังต่อไปนี้:
/////////////////////////////////ค้นหากล่องพร้อมท์/////////////// ////////////////////////
var obj_div; //วัตถุเลเยอร์พร้อมท์
var obj_input; //วัตถุกล่องอินพุต
var main_delay; //ตัดสินค่าการเปลี่ยนแปลงวัตถุล่าช้า
var ajax_delay; //ajax วัตถุการค้นหาล่าช้า
var updown_delay; //วัตถุการหน่วงเวลาคีย์ทิศทาง
var ajax_xmlhttp; //วัตถุ ajax
var div_word=null; //ค้นหาค่าที่สอดคล้องกับเลเยอร์พรอมต์ปัจจุบัน
var li_num=-1; //ตำแหน่งเคอร์เซอร์หลอก แจ้งหมายเลข li ของเลเยอร์ที่เลือก โดยเริ่มจาก 0
var li_down=-1; //หมายเลขลำดับของเลเยอร์พร้อมต์เมื่อกดเมาส์
var value_ed=; //ค่าของกล่องอินพุตก่อนดีเลย์
var value_ing=; //ค่าปัจจุบันของกล่องอินพุต
var value_unexit=; //ค้นหาจุดเริ่มต้นของค่าที่ไม่มีผลลัพธ์
var updown_run=false; //อนุญาตให้ใช้ปุ่มลูกศรขึ้นและลง
var ajax_run=false; //true หมายถึงกระบวนการปกติ false หยุด ajax
var ajax_run_ing=false; //true กำลังทำงานอยู่ false คือไม่ได้ใช้งาน
var input_focus=false; //โฟกัสกล่องข้อความ
var url=ajax.asp; //ที่อยู่แบ็กเอนด์ *************************************** *********************
var time_delayajax=300; //การค้นหาล่าช้า****************************************** **** *******************
var time_delayupdown=100; // ทิศทางของคีย์ล่าช้า **************************************** ** ****************
var $=function(Fun_id){
กลับ document.getElementById(Fun_id);
-
พยายาม{
ajax_xmlhttp= ActiveXObject ใหม่ ('Msxml2.XMLHTTP');
} จับ (จ) {
พยายาม{
ajax_xmlhttp= ใหม่ ActiveXObject('Microsoft.XMLHTTP');
} จับ (จ) {
พยายาม{
ajax_xmlhttp= XMLHttpRequest ใหม่();
} จับ(e){ajax_xmlhttp=null;}
-
-
////////////////////////// สร้างเลเยอร์พร้อมท์////////////////////// // /
ฟังก์ชั่น createajaxdiv(){
var create_div = document.createElement(div);
create_div.type = div;
var promptdiv = document.body.appendChild(create_div);
promptdiv.className = ajaxsearch;
obj_div=พร้อมท์ดิฟ;
-
/////////////////////////// กำหนดตำแหน่งเลเยอร์พรอมต์/////////////////// //////
ฟังก์ชั่น Removediv(){
if(!obj_div || !obj_input)ส่งคืนเท็จ;
ถ้า(obj_div.style.display==none)ส่งคืนเท็จ;
var obj=obj_input;
var xtop=0;
var xleft=0;
ในขณะที่ (obj) {
xtop += obj[ออฟเซ็ตท็อป];
xleft += obj[ออฟเซ็ตซ้าย];
obj = obj.offsetParent;
-
obj_div.style.left = xleft + px;
obj_div.style.top = (xtop + 20) + px; //20 เกือบจะสูงเท่ากับช่อง input โปรดปรับตามสถานการณ์จริง**************** ****** ***************************************8
li_down=-1;
-
////////////////////////// ซ่อนเลเยอร์พร้อมท์//////////////////////// // /
ฟังก์ชั่น Hideajaxdiv(){
obj_div.style.display=none;
li_down=-1;
-
/////////////////////////// ตั้งค่า <li>สไตล์ css ที่เลือก////////////////// /// //////
ฟังก์ชั่น setlistyle(){
สำหรับ (var i=0;i<obj_div.firstChild.childNodes.length;i++){
obj_div.firstChild.childNodes[i].id=;
-
ถ้า(li_num!=-1)obj_div.firstChild.childNodes[li_num].id=liseleted;
-
/////////////////////////// เมาส์ผ่านเลเยอร์พร้อมท์////////////////// ////// //
ฟังก์ชั่นโอเวอร์ลี (Fun_seletedlinum){
ถ้า(li_num==-1)value_ing=obj_input.value;
li_num=Fun_seletedlinum;
เซ็ตลิสไตล์();
-
/////////////////////////// เลเยอร์พร้อมท์การลากเมาส์///////////////////// // ///
ฟังก์ชั่น moveli(){
ถ้า (window.getSelection) {
เซ็ตโฟกัส();
window.getSelection().removeAllRanges();
}อื่น{
document.selection.empty();
เซ็ตโฟกัส();
-
-
/////////////////////////// เมาส์กดเลเยอร์คำสั่ง///////////////////// // ///
ฟังก์ชั่น downli (Fun_seletedlinum) {
ถ้า(!obj_input)ส่งคืนเท็จ;
li_down=Fun_seletedlinum;
input_focus=จริง;
-
/////////////////////////// เลเยอร์พร้อมท์ป๊อปอัปของเมาส์////////////////// /////////
ฟังก์ชั่น upli (Fun_seletedlinum, Fun_event) {
ถ้า(!obj_input)ส่งคืนเท็จ;
ถ้า (Fun_event.button==2){li_down=-1;return}
ถ้า(li_down!=Fun_seletedlinum){
li_down=-1;
กลับเท็จ;
-
clearTimeout(ajax_delay);
clearTimeout(updown_delay);
updown_run=จริง;
ajax_run=เท็จ;
ajax_run_ing=เท็จ;
li_num=-1;
div_word=null;
value_ed=obj_div.firstChild.childNodes[Fun_seletedlinum].childNodes[1].nodeValue;
obj_input.value=value_ed;
value_ing=value_ed;
ฮิเดแจ็กซ์ดิฟ();
obj_div.innerHTML=;
-
/////////////////////////// ตั้งค่ากล่องข้อความเพื่อรับโฟกัส////////////////// ////// //
ฟังก์ชั่น setfocus(){
ถ้า (window.event) {
var r = obj_input.createTextRange();
r.moveStart('ตัวละคร',obj_input.value.length);
r.ยุบ(จริง);
r.เลือก();
}อื่น{
obj_input.selectionStart=obj_input.value.length;
obj_input.โฟกัส();
-
-
///////////////////////////กล่องข้อความสูญเสียโฟกัส/////////////////// //////
ฟังก์ชั่นเบลอ () {
ถ้า(input_focus==true){
เซ็ตโฟกัส();
setTimeout(เซ็ตโฟกัส());
กลับเท็จ;
-
updown_run=เท็จ;
ajax_run=เท็จ;
ajax_run_ing=เท็จ;
clearInterval(main_delay);
clearTimeout(ajax_delay);
clearTimeout(updown_delay);
ฮิเดแจ็กซ์ดิฟ();
ถ้า(value_ed!=obj_input.value)obj_div.innerHTML=;
-
//////////////////////////กล่องข้อความได้รับการโฟกัส///////////////////// /// //
ฟังก์ชั่น focusdeal (Fun_event) {
ถ้า(!obj_div)createajaxdiv();
ถ้า(input_focus==true){
input_focus=เท็จ;
กลับเท็จ;
-
var obj=((window.event)?Fun_event.srcElement:Fun_event.target);
ถ้า(obj.type!=text)ส่งคืนเท็จ;
updown_run=จริง;
ajax_run=จริง;
ajax_run_ing=เท็จ;
ถ้า(obj_input==obj && value_ed==obj.value && obj_div.innerHTML!=){
obj_div.style.display=บล็อก;
ลบdiv();
}อื่น{
obj_input=obj;
value_ed=obj.value;
value_ing=obj.value;
value_unexit=;
li_num=-1;
li_down=-1;
div_word=null;
obj_div.innerHTML=;
ลบdiv();
-
main_delay=setInterval(mainajax(),10);
-
////////////////////////// ฟังก์ชั่นหลัก /////////////////////// ///
ฟังก์ชั่น mainajax(){
ถ้า(value_ed==obj_input.value)ส่งคืนเท็จ;
if(value_unexit!= && (obj_input.value).indexOf(value_unexit)==0){hideajxdiv();obj_div.innerHTML=;ส่งคืนเท็จ;}
ถ้า(value_ed!=obj_input.value && ajax_run_ing==false){
ajax_run=จริง;
value_ed=obj_input.value;
clearTimeout(ajax_delay);
ถ้า(obj_input.value!=){
ajax_delay=setTimeout(getsearch();,time_delayajax);
}อื่น{
ฮิเดแจ็กซ์ดิฟ();
obj_div.innerHTML=;
ajax_run=เท็จ;
กลับเท็จ;
-
-
-
////////////////////////// รับเนื้อหาการค้นหา//////////////////////// /// /
ฟังก์ชั่น getsearch () {
var temp_value=obj_input.value;
ถ้า(ajax_xmlhttp==null){
กลับเท็จ;
} อื่นถ้า(ajax_xmlhttp.readyState!=0){
ajax_xmlhttp.abort();
ajax_run_ing=เท็จ;
-
ajax_xmlhttp.onreadystatechange=function(){
ถ้า(ajax_run==false){ajax_xmlhttp.abort();ajax_run_ing=false;ส่งคืนเท็จ;}
ถ้า(ajax_xmlhttp.readyState==4){
obj_div.innerHTML=;
ถ้า (ajax_xmlhttp.status==200 || ajax_xmlhttp.status==304){
var content=ajax_xmlhttp.responseText;
ถ้า (ต่อ!= && ajax_run==true){
div_word=temp_value;
obj_div.innerHTML=รีเซ็ตคอนแทนต์(คอนแทนต์);
obj_div.style.display=บล็อก;
Removediv();removediv();
}อื่น{
ฮิเดแจ็กซ์ดิฟ();
-
updown_run=จริง;
ajax_run_ing=เท็จ;
li_num=-1;
ถ้า(contant==)value_unexit=temp_value;
-
-
-
ajax_xmlhttp.open(โพสต์,URL,จริง);
ajax_xmlhttp.setRequestHeader('ประเภทเนื้อหา','application/x-www-form-urlencoded');
ajax_run_ing=จริง;
ajax_xmlhttp.send(sift_value=+escape(temp_value)); //ค่าที่ส่งไปยังพื้นหลัง***************************** * ***********
-
/////////////////////////// การปรับโครงสร้างเนื้อหา//////////////////////// //
ฟังก์ชั่นรีเซ็ตคอนแทนต์ (Fun_contant) {
ถ้า(Fun_contant==null || Fun_contant==)กลับมา ;
var a=Fun_contant.substring(1,Fun_contant.length-1);
ถ้า(Fun_contant==null || Fun_contant==)กลับมา ;
var b=a.split('');
วาร์ค;
วาร์ด;
ง=<ul>;
สำหรับ(var i in b){
c=b[i].แยก(,);
//************************************************ ***************
d=d+<li onmouseover=/overli(+i+);/ onmousedown=/downli(+i+)/ onmouseup=/upli(+i+,เหตุการณ์)/ onmousemove=/moveli();/><span>เกี่ยวกับ +c [1]+ผลลัพธ์</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=/hideajxdiv( );/>ปิด</a></span></li>
d=d+</ul>;
กลับง;
-
/////////////////////////// กิจกรรมคีย์บอร์ด//////////////////////// //////
ฟังก์ชั่น keydowndeal (Fun_event) {
var keyc=((window.event)?Fun_event.keyCode:Fun_event.ซึ่ง);
if(keyc==13){hideajxdiv();ส่งคืนเท็จ;}
ถ้า(keyc==27){
ถ้า(obj_div.style.display==บล็อก && li_num>-1)value_ed=obj_input.value=value_ing;
ฮิเดแจ็กซ์ดิฟ();
กลับเท็จ;
-
ถ้า (keyc==40 || keyc==38){
ถ้า(div_word==obj_input.value && obj_div.style.display==none && obj_div.innerHTML!=){
obj_div.style.display=บล็อก;
ลบdiv();
กลับเท็จ;
-
ถ้า(li_num==-1){
if(div_word!=obj_input.value)ส่งคืนเท็จ;
}อื่น{
ถ้า(div_word!=value_ing)ส่งคืนเท็จ;
-
ถ้า(updown_run==false || ajax_run_ing==true || obj_div.style.display==none)ส่งคืนเท็จ;
updown_delay=setTimeout(updownli(+keyc+),time_delayupdown);
updown_run=เท็จ;
-
-
////////////////////////////// ทิศทางการเคลื่อนไหวที่สำคัญ li///////////////////// /// //
ฟังก์ชั่น updownli (Fun_key) {
ถ้า(!obj_div){ส่งคืนเท็จ;}
updown_run=จริง;
ถ้า(li_num==-1){
if(div_word!=obj_input.value){hideajaxdiv();obj_div.innerHTML=;li_num=-1;ส่งคืนเท็จ;}
}อื่น{
if(div_word!=value_ing){hideajxdiv();obj_div.innerHTML=;li_num=-1;ส่งคืนเท็จ;}
-
ถ้า(updown_run==false)ส่งคืนเท็จ;
ถ้า(li_num==-1)value_ing=value_ed;
ถ้า(Fun_key==40){
ถ้า(li_num<obj_div.firstChild.childNodes.length-2){
li_num++;
}อื่น{
li_num=-1;
-
-
ถ้า(Fun_key==38){
ถ้า(li_num>=0){
li_num--;
}อื่น{
li_num=obj_div.firstChild.childNodes.ความยาว-2;
-
-
ถ้า(li_num!=-1){
value_ed=obj_input.value=obj_div.firstChild.childNodes[li_num].childNodes[1].nodeValue;
}อื่น{
value_ed=obj_input.value=value_ing;
-
เซ็ตลิสไตล์();
-
พื้นหลัง ajax.asp
คัดลอกรหัสรหัสดังต่อไปนี้:
<%@LANGUAGE=รหัส VBSCRIPT=65001 %>
<%ตัวเลือกที่ชัดเจน%>
<%Response.CodePage=65001%>
<%Response.Charset=utf-8 %>
<!--#include file=conn.asp-->
-
dimSift_value
Sql สลัว, Rs, I, Num
สลัวคอนแทนต์
เนื้อหา=
หมายเลข=10
Sift_value=replace(unescape(request.form(sift_value)),,)
Sql=select ด้านบน &Num& คำหลัก,matchnum จากการค้นหาโดยที่คำหลักเช่น &Sift_value&% เรียงลำดับตาม id
ตั้งค่า Rs = server.CreateObject (adodb.recordset)
Rs.open Sql,Conn,1,1
ถ้าไม่ใช่ (Rs.eof และ Rs.bof) แล้ว
สำหรับ I=0 ถึง Num-1
Contant=Contant&'&rs(0)&,&rs(1)&'
฿ ย้ายต่อไป
ถ้า Rs.eof ให้ออกเพื่อ
ต่อไป
สิ้นสุดถ้า
ตอบกลับเขียน(ต่อ)
฿ปิด
ตั้ง Rs = ไม่มีเลย
-