منذ بعض الوقت، كنت أرغب في استخدام 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+,event)/ onmousemove=/moveli();/><span>about +c [1]+result</span>+c[0]+</li>;//عرض ****li
يجب أن يكون تنسيق نتيجة إخراج الخلفية "نص 1، نص 2"....
'جافا، 2''جافا سكريبت، 11''مثال جافا، 22'إلخ.
default.css
انسخ رمز الكود كما يلي:
.اجاكسسيرتش {
width:300px; // عرض طبقة المطالبة
}
Homeindex.html
انسخ رمز الكود كما يلي:
<!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>
<الرأس>
<meta http-equiv=Content-Type content=text/html;
<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; // كائن تأخير مفتاح الاتجاه
فار ajax_xmlhttp; // كائن اياكس
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 يعني العملية العادية، والخطأ يوقف ajax
var ajax_run_ing=false; // صحيح قيد التشغيل، وخطأ خامل
var input_focus=false; // تركيز مربع النص
var url=ajax.asp // عنوان الخلفية *************************************** *********************
var time_delayajax=300 //تأخير البحث********************************************* ***** *******************
var time_delayupdown=100; // تأخير مفتاح الاتجاه**************************************** ** ****************
فار $=وظيفة(Fun_id){
إرجاع document.getElementById(Fun_id);
}
يحاول{
ajax_xmlhttp= new ActiveXObject('Msxml2.XMLHTTP');
}قبض(ه){
يحاول{
ajax_xmlhttp= new ActiveXObject('Microsoft.XMLHTTP');
}قبض(ه){
يحاول{
ajax_xmlhttp= new XMLHttpRequest();
}قبض(ه){ajax_xmlhttp=null;}
}
}
///////////////////// إنشاء طبقة سريعة //////////////////////////////////////////// // /
وظيفة إنشاءajaxdiv(){
var create_div = document.createElement(div);
create_div.type = div;
فار موجه = document.body.appendChild(create_div);
Promptdiv.className = ajaxsearch;
obj_div=promptdiv;
}
//////////////////// تعيين موضع طبقة المطالبة ////////////////// //// //
تمت إزالة الوظيفة () {
if(!obj_div || !obj_input)return false;
if(obj_div.style.display==none)return false;
var obj=obj_input;
فار xtop=0;
فار xleft=0;
بينما (الكائن) {
xtop += obj[offsetTop];
xleft += obj[offsetLeft];
obj = obj.offsetParent;
}
obj_div.style.left = xleft + px;
obj_div.style.top = (xtop + 20) + px; //20 هو ارتفاع مربع الإدخال تقريبًا، يرجى ضبطه وفقًا للوضع الفعلي**************** *********************************************8
li_down=-1;
}
//////////////////////// إخفاء طبقة المطالبة ///////////////// // /
وظيفة إخفاء(){
obj_div.style.display=none;
li_down=-1;
}
//////////////////// قم بتعيين نمط <li>css المحدد//////////////// /// //////
وظيفة سيتليستيل () {
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;
}
//////////////////// يمر الماوس عبر طبقة المطالبة ///////////////// ////// //
وظيفة overli(Fun_seletedlinum){
if(li_num==-1)value_ing=obj_input.value;
li_num=Fun_seletedlinum;
setlistyle();
}
///////////////////////// طبقة السحب السريع بالماوس /////////////////// // ///
وظيفة موفيلي () {
إذا (window.getSelection) {
setfocus();
window.getSelection().removeAllRanges();
}آخر{
document.select.empty();
setfocus();
}
}
///////////////////////// طبقة الضغط بالماوس ////////////// // ///
وظيفة داونلي (Fun_seletedlinum) {
إذا قام (!obj_input) بإرجاع خطأ؛
li_down=Fun_seletedlinum;
input_focus=true;
}
//////////////////// طبقة المطالبة المنبثقة للماوس ////////////////// //// ///
وظيفة 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=true;
ajax_run=false;
ajax_run_ing=false;
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;
Hideajaxdiv();
obj_div.innerHTML=;
}
/////////////////// قم بتعيين مربع النص للحصول على التركيز ///////////////// ///// //
التركيز على الوظيفة (){
إذا (نافذة.الحدث) {
var r = obj_input.createTextRange();
r.moveStart('character',obj_input.value.length);
r.collapse(صحيح);
r.select();
}آخر{
obj_input.selectionStart=obj_input.value.length;
obj_input.focus();
}
}
///////////////////مربع النص يفقد التركيز /////////////////// //// //
وظيفة Blurdeal(){
إذا (input_focus==صحيح){
setfocus();
setTimeout(setfocus());
عودة كاذبة.
}
updown_run=false;
ajax_run=false;
ajax_run_ing=false;
ClearInterval(main_delay);
ClearTimeout(ajax_delay);
ClearTimeout(updown_delay);
Hideajaxdiv();
if(value_ed!=obj_input.value)obj_div.innerHTML=;
}
////////////////////مربع النص يتم التركيز عليه/////////////////// /// //
وظيفة التركيز(Fun_event){
if(!obj_div)createajaxdiv();
إذا (input_focus==صحيح){
input_focus=false;
عودة كاذبة.
}
var obj=((window.event)?Fun_event.srcElement:Fun_event.target);
if(obj.type!=text)return false;
updown_run=true;
ajax_run=true;
ajax_run_ing=false;
if(obj_input==obj && value_ed==obj.value && obj_div.innerHTML!=){
obj_div.style.display=block;
Removeiv();
}آخر{
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=;
Removeiv();
}
main_delay=setInterval(mainajax(),10);
}
//////////////////////// الوظيفة الرئيسية ////////////////////// ///
وظيفة مايناجاكس () {
if(value_ed==obj_input.value)return false;
if(value_unexit!= && (obj_input.value).indexOf(value_unexit)==0){hideajaxdiv();obj_div.innerHTML=;return false;}
إذا (value_ed!=obj_input.value && ajax_run_ing==false){
ajax_run=true;
value_ed=obj_input.value;
ClearTimeout(ajax_delay);
إذا (obj_input.value!=){
ajax_delay=setTimeout(getsearch();,time_delayajax);
}آخر{
Hideajaxdiv();
obj_div.innerHTML=;
ajax_run=false;
عودة كاذبة.
}
}
}
///////////////////// الحصول على محتوى البحث ///////////////////// /// /
وظيفة الحصول على البحث () {
var temp_value=obj_input.value;
إذا (ajax_xmlhttp==null){
عودة كاذبة.
}else if(ajax_xmlhttp.readyState!=0){
ajax_xmlhttp.abort();
ajax_run_ing=false;
}
ajax_xmlhttp.onreadystatechange=function(){
إذا (ajax_run==false){ajax_xmlhttp.abort();ajax_run_ing=false;return false;}
إذا (ajax_xmlhttp.readyState==4){
obj_div.innerHTML=;
إذا (ajax_xmlhttp.status==200 || ajax_xmlhttp.status==304){
var content=ajax_xmlhttp.responseText;
إذا (contant!= && ajax_run==true){
div_word=temp_value;
obj_div.innerHTML=resetcontant(contant);
obj_div.style.display=block;
Removeiv();removediv();
}آخر{
Hideajaxdiv();
}
updown_run=true;
ajax_run_ing=false;
li_num=-1;
if(contant==)value_unexit=temp_value;
}
}
}
ajax_xmlhttp.open(post,url,true);
ajax_xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
ajax_run_ing=true;
ajax_xmlhttp.send(sift_value=+escape(temp_value)); // القيمة المرسلة إلى الخلفية************************** * ***********
}
////////////////////////إعادة تنظيم المحتوى////////////////////// //
وظيفة إعادة تعيين(Fun_contant){
if(Fun_contant==null || Fun_contant==)return ;
var a=Fun_contant.substring(1,Fun_contant. length-1);
if(Fun_contant==null || Fun_contant==)return ;
var b=a.split('');
فار ج؛
فارد.
د=<ul>;
ل(فار أنا في ب){
c=b[i].split(,);
//*************************************************** ***************
d=d+<li onmouseover=/overli(+i+);/ onmousedown=/downli(+i+)/ onmouseup=/upli(+i+,event)/ onmousemove=/moveli();/><span>about +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=/hideajaxdiv( );/>إغلاق</a></span></li>
d=d+</ul>;
العودة د؛
}
////////////////////أحداث لوحة المفاتيح/////////////////////////////////////////// ////
وظيفة keydowndeal(Fun_event){
var keyc=((window.event)?Fun_event.keyCode:Fun_event.what);
إذا (keyc==13){hideajaxdiv();return false;}
إذا (مفتاح ج == 27) {
if(obj_div.style.display==block && li_num>-1)value_ed=obj_input.value=value_ing;
Hideajaxdiv();
عودة كاذبة.
}
إذا (keyc==40 || keyc==38){
if(div_word==obj_input.value && obj_div.style.display==none && obj_div.innerHTML!=){
obj_div.style.display=block;
Removeiv();
عودة كاذبة.
}
إذا (li_num==-1){
if(div_word!=obj_input.value)return false;
}آخر{
if(div_word!=value_ing)return false;
}
if(updown_run==false || ajax_run_ing==true || obj_div.style.display==none)return false;
updown_delay=setTimeout(updownli(+keyc+),time_delayupdown);
updown_run=false;
}
}
///////////////////حركة مفتاح الاتجاه li//////////////////// /// //
وظيفة أوبدوونلي (Fun_key) {
إذا (!obj_div){إرجاع خطأ؛}
updown_run=true;
إذا (li_num==-1){
إذا (div_word!=obj_input.value){hideajaxdiv();obj_div.innerHTML=;li_num=-1;return false;}
}آخر{
إذا (div_word!=value_ing){hideajaxdiv();obj_div.innerHTML=;li_num=-1;return false;}
}
إذا (updown_run==false)إرجاع خطأ؛
if(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.length-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;
}
setlistyle();
}
الخلفية ajax.asp
انسخ رمز الكود كما يلي:
<%@LANGUAGE=VBSCRIPT CODEPAGE=65001 %>
<%الخيار صريح%>
<%Response.CodePage=65001%>
<%Response.Charset=utf-8 %>
<!--#include file=conn.asp-->
<%
dimSift_value
خافت Sql، Rs، I، Num
dimContant
المحتوى=
العدد = 10
Sift_value=replace(unescape(request.form(sift_value)),,)
Sql=حدد أعلى &رقم& الكلمة الرئيسية، رقم المطابقة من البحث حيث يتم ترتيب الكلمة الرئيسية مثل &Sift_value&% حسب المعرف
تعيين Rs=server.CreateObject(adodb.recordset)
Rs.open Sql، كون، 1،1
إذا لم يكن (Rs.eof وRs.bof) ثم
لأني = 0 إلى Num-1
Contant=Contant&'&rs(0)&,&rs(1)&'
روبية
إذا Rs.eof ثم الخروج ل
التالي
نهاية إذا
استجابة. الكتابة (Contant)
روبية قريبة
تعيين روبية = لا شيء
%>