Ajax imitation Google suggest

 
 

  
  

  
Javascript.js
  
  

  
var URL = "Ajax.asp"   ; Background address
  
  

  
var Time_delayajax =  -   ; Search Latency
  
  

  
var Time_delayupdown =  -  ; Direction key delay
  
  

  
Obj_div.style.top    = (xtop +) + "px"; 20 is almost the height of the input box, please adjust according to the actual situation
  
  

  
ajax_xmlhttp.send ("sift_value=" +escape (temp_value));//Submit to backend value
  
  

  

  
  

  
D D =d+ " < Li   onmouseover= "Overli (" +i+ ");" onmousedown = "Downli (" +i+ ")" onmouseup = "Upli (" +i+ ", event)" onmousemove = "Moveli ();" > < span > about "+c[1]+" results </ span > "+c[0]+" </ Li > "; The display of//****li
 
 

The background output format must be ' Text 1, text 2 ' ...
' java,2 ' javascript,11 ' Java example, 22 ' etc

Default.css

 
  
  

  
   
   
. ajaxsearch {
  
   
   
  width:300px;//hint layer widths
 
  
  

Home index.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">  
  
  

  
<  Head >  
  
  

  
< Meta   http-equiv="content-type"   Content=" text/html; Charset=utf-8 "   />  
  
  

  
<  link      rel   =  " stylesheet "     type   =   "text/css"      span class= "attribute" >href  =   "default.css"      />      
  
  

  
< Script   language="JavaScript"   src="javascript.js"  type = "Text/javascript" > </    Script>  
  
  

  
< title > Google suggest high Imitation example </ title >  
  
  

  
</  Head >  
  
  

  

  
  

  
<  Body   onResize="Removediv ();" >  
  
  

  
< Div   style="margin:20px 50px">  
  
  

  
 <  input      style   =   "width:298px;height:18px"      type   =   "text"      autocomplete   =   "off"      onblur   =   Blurdeal (); "     onkeydown   =       onfocus   =       />      
  
  

  
</ Div >  
  
  

  
</  Body >  
  
  

  
</ HTML >  
 
 

Script Javascript.js

 
 

  
  

  
///////////////////////////////search Prompt box/////////////////////////////////  
  
  

  
var     Obj_div;  //Hint Layer object 
  
  

  
var     Obj_input;  //Input Box object 
  
  

  
var     Main_delay;  //Judgment Value change delay object 
  
  

  
var     Ajax_delay;  //ajax Deferred Search object 
  
  

  
var    Updown_delay;  //Direction key delay object 
  
  

  
var    ajax_xmlhttp;  //ajax objects 
  
  

  
var div_word= NULL    ;  //The current hint layer corresponding to the search value 
  
  

  
var     Li_num=-1;  //pseudo cursor position, hint layer selected Li serial number, starting  from 0
  
  

  
var     Li_down=-1;   //Mouse down the number of the cue layer
  
  

  
var value_ed= ""    ;   //The value of the input box before the delay
  
  

  
var value_ing= ""    ;   //The current value of the input box
  
  

  
var value_unexit= ""   ;  //search for a value with no results at the beginning 
  
  

  
var updown_run= false   ;  //Allow  the arrow keys up and down
  
  

  
var ajax_run= false    ;  //true for normal process, false stops Ajax 
  
  

  
var ajax_run_ing= false   ;  //true is running, false is idle 
  
  

  
var input_focus= false   ;  //text box focus 
  
  

  
var url= "Ajax.asp"    ;  //Background address ********************************************************** 
  
  

  
var   time_delayajax=300;  //Search delay ********************************************************** 
  
  

  
var  time_delayupdown=100;  //direction key delay ******************************************************** 
  
  

  

  
  

  
var  $= function (fun_id) {
  
  

  
   return document.getElementById (fun_id); 
  
  

  
}
  
  

  
Try {  
  
  

  
ajax_xmlhttp= New  ActiveXObject (' msxml2.xmlhttp '); 
  
  

  
Catch(e) {
  
  

  
  Try{
  
  

  
ajax_xmlhttp= New  ActiveXObject (' microsoft.xmlhttp '); 
  
  

  
Catch(e) {
  
  

  
  Try{
  
  

  
ajax_xmlhttp= New  XMLHttpRequest (); 
  
  

  
Catch(e) {ajax_xmlhttp=null;} 
  
  

  
}
  
  

  
}
  
  

  
////////////////////////Create a hint layer////////////////////////  
  
  

  
function Createajaxdiv () {
  
  

  
  var  create_div = document.createelement ("div"); 
  
  

  
Create_div.type = "Div"  ; 
  
  

  
  var  promptdiv = Document.body.appendChild (Create_div); 
  
  

  
Promptdiv.classname = "Ajaxsearch"  ; 
  
  

  
Obj_div=promptdiv;
  
  

  
}
  
  

  
////////////////////////set the hint layer position////////////////////////  
  
  

  
function Removediv () {
  
  

  
  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 +) + "px"    ;  //20 is almost the height of the input box, please adjust the ************************************************************8 according to the actual situation 
  
  

  
Li_down=-1;
  
  

  
}
  
  

  
////////////////////////Hide hint layer////////////////////////  
  
  

  
function Hideajaxdiv () {
  
  

  
obj_div.style.display= "None"  ; 
  
  

  
Li_down=-1;
  
  

  
}
  
  

  
////////////////////////Set the selected <li>css style////////////////////////  
  
  

  
function 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 through the hint layer////////////////////////  
  
  

  
function Overli (fun_seletedlinum) {
  
  

  
  if(li_num==-1) Value_ing=obj_input.value; 
  
  

  
Li_num=fun_seletedlinum;
  
  

  
Setlistyle ();
  
  

  
}
  
  

  
////////////////////////Mouse Drag hint layer////////////////////////  
  
  

  
function Moveli () {
  
  

  
  if(window.getselection) {
  
  

  
SetFocus ();
  
  

  
Window.getselection (). Removeallranges ();
  
  

  
}else{
  
  

  
Document.selection.empty ();
  
  

  
SetFocus ();
  
  

  
}
  
  

  
}
  
  

  
////////////////////////Mouse presses the hint layer////////////////////////  
  
  

  
function Downli (fun_seletedlinum) {
  
  

  
  if(!obj_input)  return false; 
  
  

  
Li_down=fun_seletedlinum;
  
  

  
input_focus= true  ; 
  
  

  
}
  
  

  
////////////////////////mouse bounce cue layer////////////////////////  
  
  

  
function 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= ""  ; 
  
  

  
}
  
  

  
////////////////////////Set the text box to get focus///////////////////////  
  
  

  
function SetFocus () {
  
  

  
  if(window.event) {
  
  

  
  var  r = Obj_input.createtextrange (); 
  
  

  
R.movestart (' character ', obj_input.value.length); 
  
  

  
R.collapse (true); 
  
  

  
R.select ();
  
  

  
}else{
  
  

  
Obj_input.selectionstart=obj_input.value.length;
  
  

  
Obj_input.focus ();
  
  

  
}
  
  

  
}
  
  

  
////////////////////////text box loses focus////////////////////////  
  
  

  
function 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=""; 
  
  

  
}
  
  

  
////////////////////////text box to get focus////////////////////////  
  
  

  
function 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 ();
  
  

  
}else{
  
  

  
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); 
  
  

  
}
  
  

  
////////////////////////main function////////////////////////  
  
  

  
function 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); 
  
  

  
}else{
  
  

  
Hideajaxdiv ();
  
  

  
obj_div.innerhtml= ""  ; 
  
  

  
ajax_run= false  ; 
  
  

  
   return false; 
  
  

  

  
  

  
}
  
  

  
}
  
  

  
}
  
  

  
////////////////////////Get search content////////////////////////  
  
  

  
function 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  Contant=ajax_xmlhttp.responsetext; 
  
  

  
  if(contant!=""  && ajax_run==true) {
  
  

  
Div_word=temp_value;
  
  

  
Obj_div.innerhtml=resetcontant (contant);
  
  

  
obj_div.style.display= "Block"  ; 
  
  

  
Removediv (); Removediv ();
  
  

  
}else{
  
  

  
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)); //Submit to backend value *****************************************  
  
  

  
}
  
  

  
////////////////////////content Reorganization///////////////////////  
  
  

  
function 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; 
  
  

  
  var  D; 
  
  

  
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]+" Results </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 ();" > Close </a></span></li> "  
  
  

  
d=d+ "</ul>"  ; 
  
  

  
   return D; 
  
  

  
}
  
  

  
////////////////////////Keyboard Event////////////////////////  
  
  

  
function 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; 
  
  

  
}else{
  
  

  
  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  ; 
  
  

  
}
  
  

  
}
  
  

  
////////////////////////Direction key mobile li////////////////////////  
  
  

  
function 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;} 
  
  

  
}else{
  
  

  
  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++;
  
  

  
}else{
  
  

  
Li_num=-1;
  
  

  
}
  
  

  
}
  
  

  
  if(fun_key==38) {
  
  

  
  if(li_num>=0) {
  
  

  
li_num--;
  
  

  
}else{
  
  

  
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;
  
  

  
}else{
  
  

  
value_ed=obj_input.value=value_ing;
  
  

  
}
  
  

  
Setlistyle ();
  
  

  
}
 
 

Backstage ajax.asp

 
 

  
  

  
<% @LANGUAGE = "VBSCRIPT" codepage= "65001" %>
  
  

  
<%option explicit%>
  
  

  
<%response.codepage= "65001" %>
  
  

  
<%response.charset= "Utf-8" %>
  
  

  
<!--#include file= "Conn.asp" -->
  
  

  
<%
  
  

  
Dim sift_value
  
  

  
Dim sql,rs,i,num
  
  

  
Dim contant
  
  

  
contant= ""  
  
  

  
num=10
  
  

  
Sift_value=replace (unescape (Request.Form ("Sift_value")),"" ", """""")  
  
  

  

  
  

  
sql= "SELECT Top" &Num& "Keyword,matchnum from search where keyword like" "" &Sift_value& "%" "ORDER by id"  
  
  

  

  
  

  
set Rs=server. CreateObject ("Adodb.recordset")
  
  

  
Rs.Open sql,conn,1,1
  
  

  
If not (rs.eof and RS.BOF) then
  
  

  
For I=0 to Num-1
  
  

  
contant=contant& "'" &rs (0) & "," &rs (1) & "'"  
  
  

  
Rs.movenext
  
  

  
If Rs.eof then exit for
  
  

  
Next
  
  

  
End If
  
  

  
Response. Write (contant)
  
  

  
Rs.close
  
  

  
Set rs=nothing
  
  

  
%>