The format of the background output result must be 'text 1, text 2 '.....
'Java, 2' javascript, 11'' java example, 22', etc.
Default.cssCopy codeThe Code is as follows:. ajaxsearch {
Width: 300px; // The width of the prompt layer.
}
First page index.htmlCopy codeThe Code is as follows: <! 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" 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 = "keydowndeal (event ); "onFocus =" focusdeal (event); "/>
</Div>
</Body>
</Html>
Script javascript. jsCopy codeThe Code is as follows: /// // search the prompt box /////// //////////////////////////
Var obj_div; // The prompt layer object.
Var obj_input; // input box object
Var main_delay; // identifies the variable value delay object.
Var ajax_delay; // ajax delayed search object
Var updown_delay; // specifies the direction key delay object.
Var ajax_xmlhttp; // ajax object
Var div_word = null; // search value corresponding to the current prompt Layer
Var li_num =-1; // The Position of the pseudo cursor, prompting the selected li serial number of the layer, starting from 0
Var li_down =-1; // press the serial number of the prompt Layer
Var value_ed = ""; // The value before the input box Delay
Var value_ing = ""; // current value of the input box
Var value_unexit = ""; // The start of a value that has not been searched.
Var updown_run = false; // allows up or down arrow keys
Var ajax_run = false; // true indicates a normal process, and false indicates that ajax is stopped.
Var ajax_run_ing = false; // true: running, false: idle
Var input_focus = false; // text box focus
Var url = "ajax. asp "; // background address ************************************ **********************
Var time_delayajax = 300; // search latency ************************************ **********************
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 prompt 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 position of the prompt layer //////////// ////////////
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 + 20) + "px"; // 20 is almost the height of the input box, adjust the value *********************************** * ************************* 8
Li_down =-1;
}
/// // Hide the prompt 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 ";
}
/// // The mouse goes through the prompt layer //////////// ////////////
Function overli (Fun_seletedlinum ){
If (li_num =-1) value_ing = obj_input.value;
Li_num = Fun_seletedlinum;
Setlistyle ();
}
//// // Drag the prompt layer with the mouse //////////// ////////////
Function moveli (){
If (window. getSelection ){
Setfocus ();
Window. getSelection (). removeAllRanges ();
} Else {
Document. selection. empty ();
Setfocus ();
}
}
/// // Press the prompt layer //////////// ////////////
Function downli (Fun_seletedlinum ){
If (! Obj_input) return false;
Li_down = Fun_seletedlinum;
Input_focus = true;
}
/// // The prompt layer is displayed with the mouse //////////// ////////////
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 the 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 ();
}
}
/// // The text box loses the 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 = "";
}
/// // Obtain the focus in the text box ///////////// ///////////
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;
}
}
}
///////////// ///////////
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 ();
} 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 )); // The value submitted to the background ********************************* ********
}
////////////// /////////
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] + "result </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;
}
////////////// //////////
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;
}
}
/// // Move the direction key 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 ();
}
Backend ajax. aspCopy codeThe Code is as follows: <% @ 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
Next
End if
Response. Write (Contant)
Rs. close
Set Rs = nothing
%>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
