ajax仿google搜索下拉提示
- WBOYOriginal
- 2016-06-08 17:30:29931browse
script type="text/javascript" src="prototype.js">
<script><br />
//定义<span class="t_tag" href="tag.php?name=%B1%E4%C1%BF" onclick="tagshow(event)">变量lastindex 表示为鼠标在查询结果上滑动所在位置，初始为-1<br />
var lastindex=-1;<br />
//定义变量flag 表示是否根据用户输入的关键字进行ajax查询,flase为允许查询 true为禁止查询<br />
var flag=false;<br />
//返回的查询结果生成的数组长度<br />
var listlength=0;<br />
function StringBuffer(){//定义对象StringBuffer<br />
this.data=[];//创建属性，自定字符串<br />
} <br />
StringBuffer.prototype.append=function(){//声明StringBuffer的方法<br />
this.data.push(arguments[0]);return this;//方法实现代码，赋值<br />
} <br />
StringBuffer.prototype.tostring=function(){//返回结果，或是说输出结果<br />
return this.data.join("");<br />
} <br />
String.prototype.Trim = function(){//滤过空格<br />
return this.replace(/(^\s*)|(\s*$)/g, "");<br />
}<br />
function hiddensearch(){//隐藏函数 主要是隐藏显示的提示下拉层和iframe，关于iframe下面在说其作用<br />
$('rlist').style.display="none";<br />
$('rFrame').style.display="none";<br />
}<br />
function showsearch(num){//显示函数 主要是显示的提示下拉层和iframe 参数num,根据该参数控制要显示提示层和iframe的高度<br />
$('rlist').style.display='';<br />
$('rFrame').style.display='';<br />
//这里我定义每个返回查询结果的提示高度为20px,其中提示层总高度又加了num,是因为我在定义样式时使用了padding一个像素<br />
$('rlist').style.height=num*20+num+'px';<br />
//同样定位iframe的高度<br />
$('rFrame').style.height=num*20+num+'px';<br />
}<br />
function getposition(element,offset){<br />
//返回文本输入框的坐标函数，参数element为要返回的对象,参数offset可选为offsetLeft|offsetTop 分别表示为该对象距离左窗口上角的绝对位置<br />
//利用这个函数可以定位我们要显示的提示层位置，使提示层正确的显示在文本输入框下面<br />
var c=0;<br />
while(element){<br />
c+=element[offset];<br />
element=element.offsetParent<br />
}<br />
return c;<br />
}<br />
/********************************DOM*************************************************/<br />
function createlist(){//创建提示层<br />
var listDiv=document.createElement("div");//createElement()方法可创建元素节点<br />
listDiv.id="rlist"; //提示层id <br />
listDiv.style.zIndex="2";//z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面，这个设置的是后便<br />
listDiv.style.position="absolute"; //position 属性把元素放置到一个静态的、相对的、绝对的、或固定的位置中。这个和下边的那个是对应的，也就是说和下边的框架是对应的，位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及 "bottom" 属性来规定。下边的出现也是因为选择了这个absolute数值<br />
listDiv.style.border="solid 1px #000000";//设置边框样式<br />
listDiv.style.backgroundColor="#FFFFFF";//设置背景颜色<br />
listDiv.style.display="none"; //此元素不会被显示<br />
listDiv.style.width=$('keyword').clientWidth+"px";//只读属性，声明了窗口的文档显示区的宽度<br />
listDiv.style.left=getposition($('keyword'),'offsetLeft')+1.5+"px";//设置定位元素左外边距<br />
listDiv.style.top =(getposition($('keyword'),'offsetTop')+$('keyword').clientHeight +3)+"px";//设置一个定位元素的上外边距边界与其包含块上边界之间的偏移。提示：如果 "position" 属性的值为 "static"，那么设置 "top" 属性不会产生任何效果。<br />
var listFrame=document.createElement("iframe");<br />
listFrame.id="rFrame";//提示层id<br />
listFrame.style.zIndex="1";//z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面，这个设置的是前边<br />
listFrame.style.position="absolute";//和上边的那个设置是对应的<br />
listFrame.style.border="0";//设置边框为0<br />
listFrame.style.display="none"; //此元素不会被显示<br />
listFrame.style.width=$('keyword').clientWidth+"px";//只读属性，声明了窗口的文档显示区的宽度<br />
listFrame.style.left=getposition($('keyword'),'offsetLeft')+1+"px";//设置定位元素左外边距<br />
listFrame.style.top =(getposition($('keyword'),'offsetTop')+$('keyword').clientHeight +3)+"px";//设置一个定位元素的上外边距边界与其包含块上边界之间的偏移。提示：如果 "position" 属性的值为 "static"，那么设置 "top" 属性不会产生任何效果。<br />
document.body.appendChild(listDiv); //向节点的子节点列表的末尾添加新的子节点。开头结尾相呼应。<br />
document.body.appendChild(listFrame);//向节点的子节点列表的末尾添加新的子节点。开头结尾相呼应 。<br />
}<br />
function setstyle(element,classname){<br />
switch (classname){<br />
case 'm':<br />
element.style.fontSize="12px";//设置字体大小<br />
element.style.fontFamily="arial,sans-serif";//fontFamily 属性定义用于元素文本显示的字体。<br />
element.style.backgroundColor="#3366cc";//背景<br />
element.style.color="black";//颜色<br />
element.style.width=$('keyword').clientWidth-2+"px";//设置只读属性的宽<br />
element.style.height="20px";//设置高度<br />
element.style.padding="1px 0px 0px 2px";//padding 属性设置元素的内边距。<br />
if(element.displaySpan)element.displaySpan.style.color="white"<br />
break;<br />
case 'd':<br />
element.style.fontSize="12px";<br />
element.style.fontFamily="arial,sans-serif";<br />
element.style.backgroundColor="white";<br />
element.style.color="black";<br />
element.style.width=$('keyword').clientWidth-2+"px";<br />
element.style.height="20px";<br />
element.style.padding="1px 0px 0px 2px";<br />
if(element.displaySpan)element.displaySpan.style.color="green"<br />
break;<br />
case 't':<br />
element.style.width="80%";<br />
if(window.navigator.userAgent.toLowerCase().indexOf("firefox")!=-1)element.style.cssFloat="left";//判断头的<br />
else element.style.styleFloat="left";<br />
element.style.whiteSpace="nowrap";<br />
element.style.overflow="hidden";<br />
element.style.textOverflow="ellipsis";<br />
element.style.fontSize="12px";<br />
element.style.textAlign="left";<br />
break;<br />
case 'h':<br />
element.style.width="20%";<br />
if(window.navigator.userAgent.toLowerCase().indexOf("firefox")!=-1)element.style.cssFloat="right";<br />
else element.style.styleFloat="right";<br />
element.style.textAlign="right";<br />
element.style.color="green";<br />
break;<br />
}<br />
}<br />
function focusitem(index){<br />
if($('item'+lastindex)!=null)setstyle($('item'+lastindex),'d');<br />
if($('item'+index)!=null){<br />
setstyle($('item'+index), 'm');<br />
lastindex=index;<br />
}<br />
else {<br />
$("keyword").focus();<br />
}<br />
}<br />
function searchclick(index){<br />
$("keyword").value=$('title'+index).innerHTML;<br />
flag=true;<br />
}<br />
function searchkeydown(e){<br />
if($('rlist').innerHTML=='')return;<br />
var keycode=(window.navigator.appName=="Microsoft Internet Explorer")?event.keyCode:e.which;<br />
//down<br />
if(keycode==40)<br />
{<br />
if(lastindex==-1||lastindex==listlength-1)<br />
{<br />
focusitem(0);<br />
searchclick(0);<br />
}<br />
else{<br />
focusitem(lastindex+1);<br />
searchclick(lastindex+1);<br />
}<br />
}<br />
if(keycode==38)<br />
{<br />
if(lastindex==-1)<br />
{<br />
focusitem(0);<br />
searchclick(0);<br />
}<br />
else{<br />
focusitem(lastindex-1);<br />
searchclick(lastindex-1);<br />
}<br />
}<br />
if(keycode==13)<br />
{<br />
focusitem(lastindex);<br />
$("keyword").value=$('title'+lastindex).innerText;<br />
} <br />
if(keycode==46||keycode==8){flag=false;ajaxsearch($F('keyword').substring(0,$F('keyword').length-1).Trim());}<br />
}<br />
function show<span class="t_tag" href="tag.php?name=result" onclick="tagshow(event)">result(xmlhttp)<br />
{<br />
var result=unescape(xmlhttp.responseText);<br />
if(result!=''){<br />
var resultstring=new StringBuffer();<br />
var title=result.split('$')[0];<br />
var hits=result.split('$')[1];<br />
for(var i=0;i<title.split('|').length;i++)<br />
{<br />
resultstring.append('<div id="item'+i+'">');<br />
resultstring.append('<span id=title'+i+'>');<br />
resultstring.append(title.split('|')[i]);<br />
resultstring.append('');<br />
resultstring.append('<span id=hits'+i+'>');<br />
resultstring.append(hits.split('|')[i]);<br />
resultstring.append('');<br />
resultstring.append('');<br />
}<br />
$('rlist').innerHTML=resultstring.tostring();<br />
for(var j=0;j<title.split('|').length;j++)<br />
{<br />
setstyle($('item'+j),'d');<br />
$('item'+j).displaySpan=$('hits'+j);<br />
setstyle($('title'+j),'t');<br />
setstyle($('hits'+j),'h');<br />
}<br />
showsearch(title.split('|').length);<br />
listlength=title.split('|').length;<br />
lastindex=-1;<br />
}<br />
else hiddensearch();<br />
}<br />
function ajaxsearch(value)<br />
{<br />
new Ajax.Request('search.php',{method:"get",parameters:"action=do&keyword="+escape(value),onComplete:showresult});<br />
}<br />
function main()<br />
{<br />
$('keyword').className=$('keyword').className=='inputblue'?'inputfocus':'inputblue';<br />
if($F('keyword').Trim()=='')hiddensearch();<br />
else<br />
{<br />
if($F('keyword')!=''&&flag==false)ajaxsearch($F('keyword').Trim());<br />
if(listlength!=0)$('keyword').onkeydown=searchkeydown;<br />
else hiddensearch();<br />
}<br />
}<br />
function oninit()<br />
{<br />
$('keyword').autocomplete="off";<br />
$('keyword').onfocus=main;<br />
$('keyword').onkeyup=main;<br />
$('keyword').onblur=hiddensearch; <br />
createlist();<br />
}<br />
Event.observe(window,'load',oninit);<br />
</script>