Vor einiger Zeit wollte ich Google Suggest verwenden und fand im Internet viele Ergebnisse, die jedoch nicht zufriedenstellend waren. Deshalb habe ich einige Zeit damit verbracht, eines zu schreiben. Es ist im Grunde dasselbe wie Google Suggest. Die folgenden ungefähren Ergebnisse gehen über den Rahmen hinaus dieses Programm. Einen vollständigeren Code finden Sie in dieser Version, die Datenbanken unterstützt. Nach Bearbeitung und Tests durch Script House.
Asp+Ajax-Imitation der Datenbankversion mit Google-Suchaufforderungseffekt
Es gibt Orte, die geändert werden müssen:
Kopieren Sie den Codecode wie folgt:
javascript.js
var url=ajax.asp; //Backend-Adresse
var time_delayajax=300; //Suchverzögerung
var time_delayupdown=100; //Richtungstastenverzögerung
obj_div.style.top = (xtop + 20) + px; //20 ist fast die Höhe des Eingabefelds, bitte passen Sie es entsprechend der tatsächlichen Situation an
ajax_xmlhttp.send(sift_value=+escape(temp_value)); //Der an den Hintergrund übermittelte Wert
dd=d+<li onmouseover=/overli(+i+);/ onmousedown=/downli(+i+)/ onmouseup=/upli(+i+,event)/ onmousemove=/moveli();/><span>about +c [1]+result</span>+c[0]+</li>;//Anzeige von ****li
Das Ergebnisformat der Hintergrundausgabe muss „Text 1, Text 2“ sein....
'Java,2''Javascript,11''Java-Beispiel,22'usw.
default.css
Kopieren Sie den Codecode wie folgt:
.ajaxsearch {
width:300px; //Die Breite der Eingabeaufforderungsebene
}
Homeindex.html
Kopieren Sie den Codecode wie folgt:
<!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>
<Kopf>
<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 schlägt ein Beispiel mit hoher Nachahmung vor</title>
</head>
<body onResize=removediv();>
<div style=margin:20px 50px>
<input style=width:298px;height:18px type=text autocomplete=off onBlur=blurdeal(); onFocus=focusdeal(event);
</div>
</body>
</html>
Scriptjavascript.js
Kopieren Sie den Codecode wie folgt:
///////////////////////////////Suchfeld ////////////// /// //////////////////
var obj_div; //Prompt-Layer-Objekt
var obj_input; //Eingabefeldobjekt
var main_delay; //Wertänderungsverzögerungsobjekt beurteilen
var ajax_delay; //Ajax-verzögertes Suchobjekt
var updown_delay; //Richtungstastenverzögerungsobjekt
var ajax_xmlhttp; //Ajax-Objekt
var div_word=null; //Suchwert entsprechend der aktuellen Eingabeaufforderungsebene
var li_num=-1; //Pseudo-Cursorposition, fordert die Li-Nummer der ausgewählten Ebene an, beginnend bei 0
var li_down=-1; //Die Sequenznummer der Eingabeaufforderungsebene, wenn die Maus gedrückt wird
var value_ed=; //Der Wert des Eingabefelds vor der Verzögerung
var value_ing=; //Der aktuelle Wert des Eingabefelds
var value_unexit=; //Suche nach dem Anfang eines Werts ohne Ergebnisse
var updown_run=false; //Pfeiltasten nach oben und unten zulassen
var ajax_run=false; //true bedeutet normaler Prozess, false stoppt Ajax
var ajax_run_ing=false; //true läuft, false ist inaktiv
var input_focus=false; //Textfeldfokus
var url=ajax.asp; //Backend-Adresse *************************************** *********************
var time_delayajax=300; //Suchverzögerung**************************************** ***** *********************
var time_delayupdown=100; //Richtungstastenverzögerung**************************************** ** ****************
var $=function(Fun_id){
return document.getElementById(Fun_id);
}
versuchen{
ajax_xmlhttp= new ActiveXObject('Msxml2.XMLHTTP');
}catch(e){
versuchen{
ajax_xmlhttp= new ActiveXObject('Microsoft.XMLHTTP');
}catch(e){
versuchen{
ajax_xmlhttp= new XMLHttpRequest();
}catch(e){ajax_xmlhttp=null;}
}
}
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // /
Funktion createajaxdiv(){
var create_div = document.createElement(div);
create_div.type = div;
var promptdiv = document.body.appendChild(create_div);
promptdiv.className = ajaxsearch;
obj_div=promptdiv;
}
/////////////////////////Stellen Sie die Position der Eingabeaufforderungsebene ein/////////////////// //// //
Funktion entferntiv(){
if(!obj_div || !obj_input)return false;
if(obj_div.style.display==none)return false;
var obj=obj_input;
var xtop=0;
var xleft=0;
while(obj){
xtop += obj[offsetTop];
xleft += obj[offsetLeft];
obj = obj.offsetParent;
}
obj_div.style.left = xleft + px;
obj_div.style.top = (xtop + 20) + px; //20 ist fast die Höhe des Eingabefelds, bitte passen Sie es entsprechend der tatsächlichen Situation an*************** ****** *****************************************8
li_down=-1;
}
/////////////////////////////////////////////////////////////////////////////////////////// // /
Funktion hideajaxdiv(){
obj_div.style.display=none;
li_down=-1;
}
/////////////////////////Legen Sie den ausgewählten <li>CSS-Stil fest//////////////// /// //////
Funktion 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;
}
/////////////////////////Die Maus bewegt sich durch die Eingabeaufforderungsebene///////////////// ////// ////// //
Funktion overli(Fun_seletedlinum){
if(li_num==-1)value_ing=obj_input.value;
li_num=Fun_seletedlinum;
setlistyle();
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // ///
Funktion moveli(){
if(window.getSelection){
setfocus();
window.getSelection().removeAllRanges();
}anders{
document.selection.empty();
setfocus();
}
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // ///
Funktion downli(Fun_seletedlinum){
if(!obj_input)return false;
li_down=Fun_seletedlinum;
input_focus=true;
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////////// //// ///
Funktion upli(Fun_seletedlinum,Fun_event){
if(!obj_input)return false;
if(Fun_event.button==2){li_down=-1;return}
if(li_down!=Fun_seletedlinum){
li_down=-1;
return false;
}
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=;
}
//////////////////////////Legen Sie das Textfeld so fest, dass es den Fokus erhält///////////////// ///// //
Funktion setfocus(){
if(window.event){
var r = obj_input.createTextRange();
r.moveStart('character',obj_input.value.length);
r.collapse(true);
r.select();
}anders{
obj_input.selectionStart=obj_input.value.length;
obj_input.focus();
}
}
//////////////////////////Das Textfeld verliert den Fokus/////////////////// //// //
Funktion Blurdeal(){
if(input_focus==true){
setfocus();
setTimeout(setfocus());
return false;
}
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=;
}
//////////////////////////Textfeld erhält Fokus//////////////////// /// //
Funktion focusdeal(Fun_event){
if(!obj_div)createajaxdiv();
if(input_focus==true){
input_focus=false;
return 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;
Removediv();
}anders{
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=;
Removediv();
}
main_delay=setInterval(mainajax(),10);
}
/////////////////////////Hauptfunktion /////////////////////// ///
Funktion mainajax(){
if(value_ed==obj_input.value)return false;
if(value_unexit!= && (obj_input.value).indexOf(value_unexit)==0){hideajaxdiv();obj_div.innerHTML=;return false;}
if(value_ed!=obj_input.value && ajax_run_ing==false){
ajax_run=true;
value_ed=obj_input.value;
clearTimeout(ajax_delay);
if(obj_input.value!=){
ajax_delay=setTimeout(getsearch();,time_delayajax);
}anders{
hideajaxdiv();
obj_div.innerHTML=;
ajax_run=false;
return false;
}
}
}
////////////////////////Suchinhalt abrufen///////////////////// /// /
Funktion getsearch(){
var temp_value=obj_input.value;
if(ajax_xmlhttp==null){
return false;
}else if(ajax_xmlhttp.readyState!=0){
ajax_xmlhttp.abort();
ajax_run_ing=false;
}
ajax_xmlhttp.onreadystatechange=function(){
if(ajax_run==false){ajax_xmlhttp.abort();ajax_run_ing=false;return false;}
if(ajax_xmlhttp.readyState==4){
obj_div.innerHTML=;
if(ajax_xmlhttp.status==200 || ajax_xmlhttp.status==304){
var content=ajax_xmlhttp.responseText;
if(contant!= && ajax_run==true){
div_word=temp_value;
obj_div.innerHTML=resetcontant(contant);
obj_div.style.display=block;
Removediv();Removediv();
}anders{
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)); //Der an den Hintergrund übermittelte Wert**************************** * ***********
}
////////////////////////Inhaltsreorganisation////////////////////// //
Funktion resetcontant(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('');
var c;
vard;
d=<ul>;
for(var i in b){
c=b[i].split(,);
//************************************************** ***************
d=d+<li onmouseover=/overli(+i+);/ onmousedown=/downli(+i+)/ onmouseup=/upli(+i+,event)/ onmousemove=/moveli();/><span>about +c [1]+Ergebnis</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( );/>Schließen</a></span></li>
d=d+</ul>;
return d;
}
/////////////////////////Tastaturereignisse////////////////////// ////
Funktion keydowndeal(Fun_event){
var keyc=((window.event)?Fun_event.keyCode:Fun_event.which);
if(keyc==13){hideajaxdiv();return false;}
if(keyc==27){
if(obj_div.style.display==block && li_num>-1)value_ed=obj_input.value=value_ing;
hideajaxdiv();
return false;
}
if(keyc==40 || keyc==38){
if(div_word==obj_input.value && obj_div.style.display==none && obj_div.innerHTML!=){
obj_div.style.display=block;
Removediv();
return false;
}
if(li_num==-1){
if(div_word!=obj_input.value)return false;
}anders{
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;
}
}
/////////////////////////Richtungstastenbewegung li//////////////////// /// //
Funktion updownli(Fun_key){
if(!obj_div){return false;}
updown_run=true;
if(li_num==-1){
if(div_word!=obj_input.value){hideajaxdiv();obj_div.innerHTML=;li_num=-1;return false;}
}anders{
if(div_word!=value_ing){hideajaxdiv();obj_div.innerHTML=;li_num=-1;return false;}
}
if(updown_run==false)return false;
if(li_num==-1)value_ing=value_ed;
if(Fun_key==40){
if(li_num<obj_div.firstChild.childNodes.length-2){
li_num++;
}anders{
li_num=-1;
}
}
if(Fun_key==38){
if(li_num>=0){
li_num--;
}anders{
li_num=obj_div.firstChild.childNodes.length-2;
}
}
if(li_num!=-1){
value_ed=obj_input.value=obj_div.firstChild.childNodes[li_num].childNodes[1].nodeValue;
}anders{
value_ed=obj_input.value=value_ing;
}
setlistyle();
}
Hintergrund ajax.asp
Kopieren Sie den Codecode wie folgt:
<%@LANGUAGE=VBSCRIPT CODEPAGE=65001 %>
<%option explizit%>
<%Response.CodePage=65001%>
<%Response.Charset=utf-8 %>
<!--#include file=conn.asp-->
<%
dimSift_value
dim Sql,Rs,I,Num
dimContant
Inhalt=
Anzahl=10
Sift_value=replace(unescape(request.form(sift_value)),,)
Sql=wählen Sie das oberste &Num&-Schlüsselwort aus, Übereinstimmungsnummer aus der Suche, wobei Schlüsselwörter wie &Sift_value&% nach ID sortiert werden
set Rs=server.CreateObject(adodb.recordset)
Rs.open Sql,Conn,1,1
wenn nicht (Rs.eof und Rs.bof), dann
für I=0 bis Num-1
Inhalt=Inhalt&'&rs(0)&,&rs(1)&'
Rs. movenext
Wenn Rs.eof, dann beenden Sie für
nächste
Ende wenn
Antwort.Write(Contant)
Rs.schließen
setze Rs=nichts
%>