Il y a quelque temps, j'ai voulu utiliser Google Suggest et j'ai trouvé beaucoup de résultats sur Internet, mais je n'étais pas satisfaisant, j'ai donc passé du temps à en écrire un. C'est fondamentalement la même chose que Google Suggest. Les résultats approximatifs suivants dépassent la portée de. ce programme. Pour un code plus complet, veuillez vous référer à cette version qui prend en charge la base de données. Après édition et test par Script House.
Asp + Ajax imitation version de la base de données d'effet d'invite de recherche Google
Il y a des endroits qui doivent être modifiés :
Copiez le code comme suit :
javascript.js
var url=ajax.asp; //Adresse du back-end
var time_delayajax=300; //Délai de recherche
var time_delayupdown=100; //Délai de touche de direction
obj_div.style.top = (xtop + 20) + px; //20 est presque la hauteur de la zone de saisie, veuillez l'ajuster en fonction de la situation réelle
ajax_xmlhttp.send(sift_value=+escape(temp_value)); //La valeur soumise en arrière-plan
dd=d+<li onmouseover=/overli(+i+);/ onmousedown=/downli(+i+)/ onmouseup=/upli(+i+,event)/ onmousemove=/moveli();/><span>à propos de +c [1]+résultat</span>+c[0]+</li>;//Affichage de ****li
Le format du résultat de la sortie en arrière-plan doit être « Texte 1, Texte 2 »....
'java,2''javascript,11''exemple java,22'etc.
par défaut.css
Copiez le code comme suit :
.ajaxsearch {
width:300px; //La largeur du calque d'invite
}
Accueilindex.html
Copiez le code comme suit :
<!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>
<tête>
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
<link rel=stylesheet type=text/css href=default.css />
<script langage=JavaScript src=javascript.js type=text/javascript></script>
<title>Google suggère un exemple d'imitation élevée</title>
</tête>
<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>
</corps>
</html>
Scriptjavascript.js
Copiez le code comme suit :
////////////////////////////////Boîte d'invite de recherche////////////// /// //////////////////
var obj_div; //Objet de couche d'invite
var obj_input; //Objet boîte de saisie
var main_delay; //Objet de délai de changement de valeur du juge
var ajax_delay; //objet de recherche retardée ajax
var updown_delay; //Objet de retard de touche de direction
var ajax_xmlhttp; //objet ajax
var div_word=null; //Valeur de recherche correspondant à la couche d'invite actuelle
var li_num=-1; //Position du pseudo-curseur, affiche le numéro li du calque sélectionné, à partir de 0
var li_down=-1; //Le numéro de séquence de la couche d'invite lorsque la souris est enfoncée
var value_ed=; //La valeur de la zone de saisie avant le délai
var value_ing=; //La valeur actuelle de la zone de saisie
var value_unexit=; //Recherche le début d'une valeur sans résultat
var updown_run=false; //Autoriser les touches fléchées haut et bas
var ajax_run=false; //true signifie un processus normal, false arrête ajax
var ajax_run_ing=false; //true est en cours d'exécution, false est inactif
var input_focus=false; // Focus sur la zone de texte
var url=ajax.asp; //Adresse du back-end ************************************ ********************
var time_delayajax=300; //Délai de recherche************************************** ***** *******************
var time_delayupdown=100; //Délai de touche de direction*************************************** ** ****************
var $=fonction(Fun_id){
return document.getElementById(Fun_id);
}
essayer{
ajax_xmlhttp= new ActiveXObject('Msxml2.XMLHTTP');
}attraper(e){
essayer{
ajax_xmlhttp= new ActiveXObject('Microsoft.XMLHTTP');
}attraper(e){
essayer{
ajax_xmlhttp= new XMLHttpRequest();
}catch(e){ajax_xmlhttp=null;}
}
}
////////////////////////Créer une couche d'invite///////////////////// ///
fonction createajaxdiv(){
var create_div = document.createElement(div);
create_div.type = div;
var promptdiv = document.body.appendChild(create_div);
promptdiv.className = ajaxsearch;
obj_div=promptdiv;
}
/////////////////////////Définir la position du calque d'invite/////////////////// //// //
fonction suppriméeiv(){
if(!obj_div || !obj_input)return false;
if(obj_div.style.display==none)return false;
var obj=obj_input;
varxtop=0;
var xgauche=0;
tandis que(obj){
xtop += obj[offsetTop];
xleft += obj[offsetLeft];
obj = obj.offsetParent ;
}
obj_div.style.left = xleft + px;
obj_div.style.top = (xtop + 20) + px; //20 est presque la hauteur de la zone de saisie, veuillez l'ajuster en fonction de la situation réelle **************** ****** **************************************8
li_down=-1;
}
////////////////////////Masquer le calque d'invite///////////////////// ///
fonction hideajaxdiv(){
obj_div.style.display=aucun ;
li_down=-1;
}
/////////////////////////Définir le style <li>css sélectionné//////////////// /// //////
fonction setlistyle(){
pour(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;
}
/////////////////////////La souris passe à travers le calque d'invite///////////////// ////// //
fonction overli(Fun_seletedlinum){
if(li_num==-1)value_ing=obj_input.value;
li_num=Fun_seletedlinum;
setlistyle();
}
/////////////////////////Couche d'invite de déplacement de la souris/////////////////// // ///
fonction moveli(){
si(window.getSelection){
setfocus();
window.getSelection().removeAllRanges();
}autre{
document.selection.empty();
setfocus();
}
}
//////////////////////////Couche d'invite de pression de la souris/////////////////// // ///
fonction downli(Fun_seletedlinum){
if(!obj_input)return false;
li_down=Fun_seletedlinum;
input_focus=true ;
}
//////////////////////////Couche d'invite contextuelle de la souris////////////////// //// ///
fonction upli(Fun_seletedlinum,Fun_event){
if(!obj_input)return false;
if(Fun_event.button==2){li_down=-1;return}
si(li_down!=Fun_seletedlinum){
li_down=-1;
renvoie faux ;
}
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=;
}
/////////////////////////Définir la zone de texte pour obtenir le focus///////////////// ///// //
fonction setfocus(){
si(fenêtre.événement){
var r = obj_input.createTextRange();
r.moveStart('character',obj_input.value.length);
r.collapse(true);
r.select();
}autre{
obj_input.selectionStart=obj_input.value.length;
obj_input.focus();
}
}
/////////////////////////La zone de texte perd le focus////////////////// //// //
fonction flou(){
si(input_focus==true){
setfocus();
setTimeout(setfocus());
renvoie faux ;
}
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=;
}
//////////////////////////La zone de texte obtient le focus/////////////////// /// //
fonction focusdeal(Fun_event){
if(!obj_div)createajaxdiv();
si(input_focus==true){
input_focus=false ;
renvoie faux ;
}
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=bloc ;
suppriméiv();
}autre{
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=;
suppriméiv();
}
main_delay=setInterval(mainajax(),10);
}
////////////////////////Fonction principale ////////////////////// ///
fonction 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);
si(obj_input.value!=){
ajax_delay=setTimeout(getsearch();,time_delayajax);
}autre{
hideajaxdiv();
obj_div.innerHTML=;
ajax_run=false;
renvoie faux ;
}
}
}
////////////////////////Obtenir le contenu de la recherche///////////////////// /// /
fonction getsearch(){
var temp_value=obj_input.value;
si(ajax_xmlhttp==null){
renvoie faux ;
}sinon si(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;}
si(ajax_xmlhttp.readyState==4){
obj_div.innerHTML=;
si(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=bloc ;
suppriméiv();removédiv();
}autre{
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)); //La valeur soumise en arrière-plan***************************** * ***********
}
////////////////////////Réorganisation du contenu////////////////////// //
fonction réinitialisercontant(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;
var;
d=<ul>;
pour(var je dans b){
c=b[i].split(,);
//************************************************ **************
d=d+<li onmouseover=/overli(+i+);/ onmousedown=/downli(+i+)/ onmouseup=/upli(+i+,event)/ onmousemove=/moveli();/><span>à propos de +c [1]+résultat</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( );/>Fermer</a></span></li>
d=d+</ul>;
retourner d ;
}
//////////////////////////Événements de clavier///////////////////// ////
fonction keydowndeal (Fun_event) {
var keyc=((window.event)?Fun_event.keyCode:Fun_event.which);
if(keyc==13){hideajaxdiv();return false;}
si(cléc==27){
if(obj_div.style.display==block && li_num>-1)value_ed=obj_input.value=value_ing;
hideajaxdiv();
renvoie faux ;
}
si(cléc==40 || cléc==38){
if(div_word==obj_input.value && obj_div.style.display==none && obj_div.innerHTML!=){
obj_div.style.display=bloc ;
suppriméiv();
renvoie faux ;
}
si(li_num==-1){
if(div_word!=obj_input.value)return false;
}autre{
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;
}
}
//////////////////////////Mouvement des touches de direction li/////////////////// /// //
fonction updownli(Fun_key){
si(!obj_div){return false;}
updown_run=true ;
si(li_num==-1){
if(div_word!=obj_input.value){hideajaxdiv();obj_div.innerHTML=;li_num=-1;return false;}
}autre{
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;
si(Fun_key==40){
if(li_num<obj_div.firstChild.childNodes.length-2){
li_num++;
}autre{
li_num=-1 ;
}
}
si(Fun_key==38){
si(li_num>=0){
li_num--;
}autre{
li_num=obj_div.firstChild.childNodes.length-2;
}
}
si(li_num!=-1){
value_ed=obj_input.value=obj_div.firstChild.childNodes[li_num].childNodes[1].nodeValue;
}autre{
value_ed=obj_input.value=value_ing;
}
setlistyle();
}
arrière-plan ajax.asp
Copiez le code comme suit :
<%@LANGUAGE=VBSCRIPT CODEPAGE=65001 %>
<%option explicite%>
<%Response.CodePage=65001%>
<%Response.Charset=utf-8 %>
<!--#include file=conn.asp-->
<%
dimSift_value
dim Sql, Rs, I, Nombre
dimContant
Contenu=
Nombre=10
Sift_value=replace(unescape(request.form(sift_value)),,)
Sql = sélectionner le premier &Num& mot-clé, matchnum de la recherche où le mot-clé comme &Sift_value&% ordre par identifiant
définir Rs=server.CreateObject(adodb.recordset)
Rs.open SQL,Conn,1,1
sinon (Rs.eof et Rs.bof) alors
pour I=0 à Num-1
Contant=Contant&'&rs(0)&,&rs(1)&'
Rs. movenext
si Rs.eof alors quittez pour
suivant
finir si
réponse.Write(Contant)
Rs.fermer
définir Rs = rien
%>