- 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>约"+c[1]+"结果</span>"+c[0]+"</li>";//****li的显示
后台输出结果格式必需为'文本1,文本2'.....
'java,2''javascript,11''java示例,22'等
default.css
- .ajaxsearch {
- width:300px; //提示层的宽度
首页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" href="default.css" />
- <script language="JavaScript" src="javascript.js" type="text/javascript"></script>
- <title>Google suggest高仿示例</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>
脚本javascript.js
- ///////////////////////////////搜索提示框/////////////////////////////////
- var obj_div; //提示层对象
- var obj_input; //输入框对象
- var main_delay; //判断值变化延迟对象
- var ajax_delay; //ajax延迟搜索对象
- var updown_delay; //方向键延迟对象
- var ajax_xmlhttp; //ajax对象
- 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为正常进程,false停止ajax
- var ajax_run_ing=false; //true正在运行,false空闲
- var input_focus=false; //文本框焦点
- var url="ajax.asp"; //后台地址**********************************************************
- var time_delayajax=300; //搜索延迟**********************************************************
- var time_delayupdown=100; //方向键延迟********************************************************
- 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;}
- }
- }
- ////////////////////////创建提示层////////////////////////
- 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;
- }
- ////////////////////////设置提示层位置////////////////////////
- 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差不多是输入框的高度,请根据实际情况调整************************************************************8
- li_down=-1;
- }
- ////////////////////////隐藏提示层////////////////////////
- function hideajaxdiv(){
- obj_div.style.display="none";
- li_down=-1;
- }
- ////////////////////////设置被选<li>css样式////////////////////////
- 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";
- }
- ////////////////////////鼠标经过提示层////////////////////////
- function overli(Fun_seletedlinum){
- if(li_num==-1)value_ing=obj_input.value;
- li_num=Fun_seletedlinum;
- setlistyle();
- }
- ////////////////////////鼠标拖动提示层////////////////////////
- function moveli(){
- if(window.getSelection){
- setfocus();
- window.getSelection().removeAllRanges();
- }else{
- document.selection.empty();
- setfocus();
- }
- }
- ////////////////////////鼠标按下提示层////////////////////////
- function downli(Fun_seletedlinum){
- if(!obj_input)return false;
- li_down=Fun_seletedlinum;
- input_focus=true;
- }
- ////////////////////////鼠标弹起提示层////////////////////////
- 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="";
- }
- ////////////////////////设置文本框获取焦点///////////////////////
- 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();
- }
- }
- ////////////////////////文本框失去焦点////////////////////////
- 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="";
- }
- ////////////////////////文本框获取焦点////////////////////////
- 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);
- }
- ////////////////////////主函数////////////////////////
- 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();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)); //提交到后台的值*****************************************
- }
- ////////////////////////内容重组///////////////////////
- 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>约"+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>";
- 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;
- }
- }
- ////////////////////////方向键移动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();
- }
后台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
- %>
以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索对象
搜索
magicsuggest ajax、ajax suggest、google suggest、google suggest工具、ajax.googleapis.com,以便于您获取更多的相关知识。
时间: 2024-10-29 22:47:45