Warning: Unexpected character in input: ' in D:\php186\www.php186.com\index.php on line 38
 高仿google suggest ajax示例-WEB开发网
您的位置:网站主页> Ajax教程 > 高仿google suggest ajax示例

高仿google suggest ajax示例

时间:2013-04-14 11:51:08   编辑:王连龙   文章来源:php教学网 已阅读:2811 次

需要修改的地方有

  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]+"& lt;/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 &amp;&amp; value_ed==obj.value &amp;&amp; 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!='' &amp;&amp; (obj_input.value).indexOf(value_unexit)==0){hideajaxdiv();obj_div.innerHTML='';return false;} 
 if(value_ed!=obj_input.value &amp;&amp; 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!='' &amp;&amp; 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]+'& lt;/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' &amp;&amp; li_num>-1)value_ed=obj_input.value=value_ing; 
  hideajaxdiv(); 
  return false; 
 }  
 if(keyc==40 || keyc==38){ 
  if(div_word==obj_input.value &amp;&amp; obj_div.style.display=='none' &amp;&amp; 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

 

%>

本文地址:http://www.php186.com/content/article/ajax/11991.html(转载请保留)

相关关键词搜索:高仿google suggest ajax示例

查看评论更多>>
4楼 liujian 2015-04-21 17:34发表
好网站,值得收藏,以后会多多来看,很多文章内容都挺好的!
3楼 niulang 2015-04-21 17:33发表
不论国外,单是我们中国,各种各样的网站数不胜数。打开页面第一个看到的不是你的网站有什么,而是你的整体布局,一个清爽、干净、整洁的页面是一个赢得人心的法宝,大站有大站的气势,小站有小站的风格,好的视觉效果可以告诉人们这个站点有实力,这个站点值得信赖,给人很强的亲和力,有一种发现新宝地,希望赶紧收藏的冲动。
2楼 leenons 2015-04-21 17:28发表
现在看php学习网都会在百度上面找找看评分怎么样,值不值得一看;同时也会将看过的php教程网站记录,有时候留下一些自己的感想的评论,有很多逗比的评论,还有很多专业的评论,建议大家可以在web开发网上面寻找相关文章、api,大部分的内容都还合理。
1楼 xiaobudian 2015-04-21 17:25发表
网站文章挺不错的,值得学习,希望站长多多努力!
发表评论
      
* 以上用户言论只代表其个人观点,不代表www.php186.com网站的观点或立场
推荐文档更多

WEB开发网 | PHP教程 | Mysql教程 | Apache教程 | 最新文章 | PHP面试题| 网站地图 | Google地图 | Baidu地图 | 在线WEB论坛| 中纪委反腐最新消息

WEB技术QQ交流群:151888886 站长Q号:547218888
版权所有者:WEB开发网 地址:云南省文山州砚山县盘龙乡 滇ICP备12002707号-1
特别声明:本站内容仅供参考,不作为设计及确切依据!想了解更多,可立即进入Bbs提问