12345678910... 39
返回列表 回复 发帖

[原创] ajax之搜索提示

omcmc

PHPChina贵宾

Rank: 3Rank: 3
1#
打印
tT
发表于 2008-1-25 10:40 | 只看该作者

[原创] ajax之搜索提示

大家都使用过google或者xunlei的搜索，输入关键字后可以出现相关提示，是个不错的功能，今天就在这里给大家把我的拙作给大家分享

博客现在由于空间问题暂时关闭，所以实例效果现在已经无法看到，如果你有问题可以qq我：174171262
截图：


代码下载：
本帖隐藏的内容需要回复才可以浏览


数据库表：

  2. CREATE TABLE `xqbar`.`suggest` (
  3. `id` INT NOT NULL AUTO_INCREMENT ,
  4. `title` VARCHAR( 100 ) NOT NULL ,
  5. `hits` INT NOT NULL DEFAULT '0',
  6. PRIMARY KEY ( `id` )
  7. ) ENGINE = InnoDB

  9. insert into suggest(title,hits)values('xqbar.com',100);
  10. insert into suggest(title,hits)values('www.xqbar.com',410);
  11. insert into suggest(title,hits)values('http://xqbar.com',700);
  12. insert into suggest(title,hits)values('mail:xqbar.com',200);
  13. insert into suggest(title,hits)values('ftp:xqbar.com',100);
  14. insert into suggest(title,hits)values('http://www.xqbar.com',70)
复制代码
search.php
(关于php我也是接触不久，下面的php如果罗嗦还望高手指点)
返回的信息字符串要为 xxx1|xxx2$200|100 前后对应

  2. <?php
  3. if($_GET["action"]!=''){
  4.    #获取用户输入的关键字
  5.    $keyword=$_GET["keyword"];
  6.    #过滤关键字
  7.    $keyword=str_replace("[","[[]",$keyword);
  8.    $keyword=str_replace("&","[&]",$keyword);
  9.    $keyword=str_replace("%","[%]",$keyword);
  10.    $keyword=str_replace("^","[^]",$keyword);
  11.    #链接数据库
  12.    $conn=mysql_connect("localhost","xqbar","xqbaradmin");
  13.    #选择数据库
  14.    @mysql_select_db("xqbar") or die('sorry');
  15.    mysql_query('set names utf-8');
  16.    #查询语句
  17.    $sql="select title,hits from suggest where title like '%".$keyword."%' order by hits desc limit 10";
  18.    $result=mysql_query($sql);
  19.    #循环得到查询结果，返回字符串
  20.    #格式为 结果1|结果2$结果1点击次数|结果2点击次数
  21.    if($result){
  22.    $i=1;$title='';$hits='';
  23.    while($row=mysql_fetch_array($result,MYSQL_BOTH))
  24.    {
  25.      $title=$title.$row['title'];
  26.    $hits=$hits.$row['hits'];
  27.    if($i<mysql_num_rows($result))
  28.   {
  29.    $title=$title."|";
  30.    $hits=$hits."|";
  31.   }
  32.   $i++;
  33.     }
  34.    }
  35.    mysql_close();
  36. }
  37. ?>
  38. <?php echo $title.'js代码[code]

  40. 引入prototye.js有朋友说这个库太大，或者把，不习惯的朋友可以使用jquery.js框架或者直接创建ajax对象，这个我就不想说了，这里直接引用prototye.js框架
  41. <script type="text/javascript" src="prototype.js"></script>
  42. 创建层和显示查询结果的js代码
  43. <script type="text/javascript">
  44. //定义变量lastindex 表示为鼠标在查询结果上滑动所在位置，初始为-1
  45. var lastindex=-1;
  46. //定义变量flag 表示是否根据用户输入的关键字进行ajax查询,flase为允许查询 true为禁止查询
  47. var flag=false;
  48. //返回的查询结果生成的数组长度
  49. var listlength=0;
  50. //创建自定字符串，优化效率
  51. function StringBuffer(){this.data=[];}
  52. //赋值
  53. StringBuffer.prototype.append=function(){this.data.push(arguments[0]);return this;}
  54. //输出
  55. StringBuffer.prototype.tostring=function(){return this.data.join("");}
  56. //去掉字符串两边空格
  57. String.prototype.Trim = function(){return this.replace(/(^\s*)|(\s*$)/g, "");}
  58. //隐藏函数 主要是隐藏显示的提示下拉层和iframe，关于iframe下面在说其作用
  59. function hiddensearch()
  60. {
  61. $('rlist').style.display="none";
  62. $('rFrame').style.display="none";
  63. }
  64. //显示函数 主要是显示的提示下拉层和iframe 参数num,根据该参数控制要显示提示层和iframe的高度
  65. function showsearch(num)
  66. {
  67.   $('rlist').style.display='';
  68.   $('rFrame').style.display='';
  69.   //这里我定义每个返回查询结果的提示高度为20px,其中提示层总高度又加了num,是因为我在定义样式时使用了padding一个像素
  70.   $('rlist').style.height=num*20+num+'px';
  71.   //同样定位iframe的高度
  72.   $('rFrame').style.height=num*20+num+'px';
  73. }
  74. //返回文本输入框的坐标函数，参数element为要返回的对象,参数offset可选为offsetLeft|offsetTop 分别表示为该对象距离左窗口上角的绝对位置
  75. //利用这个函数可以定位我们要显示的提示层位置，使提示层正确的显示在文本输入框下面
  76. function getposition(element,offset)
  77. {
  78.     var c=0;
  79.     while(element)
  80.     {
  81.         c+=element[offset];
  82.         element=element.offsetParent
  83.     }
  84.     return c;
  85. }
  86. //创建提示层函数 包括提示层和为了避免在文本输入框下面出现select下拉选框时我们的提示层不能再select之上的iframe
  87. //可以理解为当文本输入框下有select下拉选框时从底向上依次为 select下拉选框-iframe-提示层
  88. function createlist()
  89. {
  90. //创建提示层
  91. var listDiv=document.createElement("div");
  92. //提示层id
  93. listDiv.id="rlist";        
  94. listDiv.style.zIndex="2";
  95. listDiv.style.position="absolute";
  96. listDiv.style.border="solid 1px #000000";
  97. listDiv.style.backgroundColor="#FFFFFF";
  98. listDiv.style.display="none";
  99. listDiv.style.width=$('keyword').clientWidth+"px";
  100. listDiv.style.left=getposition($('keyword'),'offsetLeft')+1.5+"px";
  101. listDiv.style.top =(getposition($('keyword'),'offsetTop')+$('keyword').clientHeight +3)+"px";

  103. var listFrame=document.createElement("iframe");
  104. listFrame.id="rFrame";
  105. listFrame.style.zIndex="1";
  106. listFrame.style.position="absolute";
  107. listFrame.style.border="0";
  108. listFrame.style.display="none";
  109. listFrame.style.width=$('keyword').clientWidth+"px";
  110. listFrame.style.left=getposition($('keyword'),'offsetLeft')+1+"px";
  111. listFrame.style.top =(getposition($('keyword'),'offsetTop')+$('keyword').clientHeight +3)+"px";
  112. document.body.appendChild(listDiv);      
  113. document.body.appendChild(listFrame);
  114. }
  115. function setstyle(element,classname)
  116. {
  117. switch (classname)
  118.     {
  119.      case 'm':
  120.        element.style.fontSize="12px";
  121.     element.style.fontFamily="arial,sans-serif";
  122.     element.style.backgroundColor="#3366cc";
  123.     element.style.color="black";
  124.     element.style.width=$('keyword').clientWidth-2+"px";
  125.     element.style.height="20px";
  126.           element.style.padding="1px 0px 0px 2px";
  127.           if(element.displaySpan)element.displaySpan.style.color="white"
  128.     break;
  129.      case 'd':
  130.        element.style.fontSize="12px";
  131.     element.style.fontFamily="arial,sans-serif";
  132.     element.style.backgroundColor="white";
  133.     element.style.color="black";
  134.     element.style.width=$('keyword').clientWidth-2+"px";
  135.     element.style.height="20px";
  136.           element.style.padding="1px 0px 0px 2px";
  137.           if(element.displaySpan)element.displaySpan.style.color="green"
  138.     break;
  139.   case 't':
  140.        element.style.width="80%";
  141.     if(window.navigator.userAgent.toLowerCase().indexOf("firefox")!=-1)element.style.cssFloat="left";
  142.     else element.style.styleFloat="left";
  143.     element.style.whiteSpace="nowrap";
  144.     element.style.overflow="hidden";
  145.     element.style.textOverflow="ellipsis";
  146.     element.style.fontSize="12px";
  147.     element.style.textAlign="left";
  148.     break;
  149.   case 'h':
  150.        element.style.width="20%";
  151.     if(window.navigator.userAgent.toLowerCase().indexOf("firefox")!=-1)element.style.cssFloat="right";
  152.     else element.style.styleFloat="right";
  153.     element.style.textAlign="right";
  154.     element.style.color="green";
  155.     break;
  156.     }
  157. }
  158. function focusitem(index)
  159. {
  160.   if($('item'+lastindex)!=null)setstyle($('item'+lastindex),'d');
  161.   if($('item'+index)!=null)
  162.   {
  163.    setstyle($('item'+index), 'm');
  164.    lastindex=index;
  165.   }
  166.   else $("keyword").focus();
  167. }
  168. function searchclick(index)
  169. {
  170.   $("keyword").value=$('title'+index).innerHTML;
  171.   flag=true;
  172. }
  173. function searchkeydown(e)
  174. {
  175. if($('rlist').innerHTML=='')return;
  176.   var keycode=(window.navigator.appName=="Microsoft Internet Explorer")?event.keyCode:e.which;
  177.   //down
  178.   if(keycode==40)
  179.   {
  180. if(lastindex==-1||lastindex==listlength-1)
  181. {
  182.   focusitem(0);
  183.   searchclick(0);
  184. }
  185. else{
  186.   focusitem(lastindex+1);
  187.   searchclick(lastindex+1);
  188. }
  189.   }
  190. if(keycode==38)
  191. {
  192. if(lastindex==-1)
  193. {
  194.   focusitem(0);
  195.   searchclick(0);
  196. }
  197. else{
  198.   focusitem(lastindex-1);
  199.   searchclick(lastindex-1);
  200. }
  201. }
  202. if(keycode==13)
  203. {
  204.   focusitem(lastindex);
  205.   $("keyword").value=$('title'+lastindex).innerText;
  206. }   
  207. if(keycode==46||keycode==8){flag=false;ajaxsearch($F('keyword').substring(0,$F('keyword').length-1).Trim());}
  208. }
  209. function showresult(xmlhttp)
  210. {
  211. var result=unescape(xmlhttp.responseText);
  212. if(result!=''){
  213.     var resultstring=new StringBuffer();
  214.        var title=result.split('搜索框[code]
  215. <form id="form1" name="form1" method="post" action="">
  216.      　<b>输入搜索关键字</b>
  217.     <input name="keyword" type="text" class="inputblue" id="keyword" maxlength="20" style="width:300px;" />
  218. </form>
复制代码
就这些，没加说明，有时间再加吧，加的话 可以去我的博客看看http://www.xqbar.com/read.php?6.$hits;?>[/code]js代码


  3. 引入prototye.js有朋友说这个库太大，或者把，不习惯的朋友可以使用jquery.js框架或者直接创建ajax对象，这个我就不想说了，这里直接引用prototye.js框架
  4. <script type="text/javascript" src="prototype.js"></script>
  5. 创建层和显示查询结果的js代码
  6. <script type="text/javascript">
  7. //定义变量lastindex 表示为鼠标在查询结果上滑动所在位置，初始为-1
  8. var lastindex=-1;
  9. //定义变量flag 表示是否根据用户输入的关键字进行ajax查询,flase为允许查询 true为禁止查询
  10. var flag=false;
  11. //返回的查询结果生成的数组长度
  12. var listlength=0;
  13. //创建自定字符串，优化效率
  14. function StringBuffer(){this.data=[];}
  15. //赋值
  16. StringBuffer.prototype.append=function(){this.data.push(arguments[0]);return this;}
  17. //输出
  18. StringBuffer.prototype.tostring=function(){return this.data.join("");}
  19. //去掉字符串两边空格
  20. String.prototype.Trim = function(){return this.replace(/(^\s*)|(\s*$)/g, "");}
  21. //隐藏函数 主要是隐藏显示的提示下拉层和iframe，关于iframe下面在说其作用
  22. function hiddensearch()
  23. {
  24. $('rlist').style.display="none";
  25. $('rFrame').style.display="none";
  26. }
  27. //显示函数 主要是显示的提示下拉层和iframe 参数num,根据该参数控制要显示提示层和iframe的高度
  28. function showsearch(num)
  29. {
  30.   $('rlist').style.display='';
  31.   $('rFrame').style.display='';
  32.   //这里我定义每个返回查询结果的提示高度为20px,其中提示层总高度又加了num,是因为我在定义样式时使用了padding一个像素
  33.   $('rlist').style.height=num*20+num+'px';
  34.   //同样定位iframe的高度
  35.   $('rFrame').style.height=num*20+num+'px';
  36. }
  37. //返回文本输入框的坐标函数，参数element为要返回的对象,参数offset可选为offsetLeft|offsetTop 分别表示为该对象距离左窗口上角的绝对位置
  38. //利用这个函数可以定位我们要显示的提示层位置，使提示层正确的显示在文本输入框下面
  39. function getposition(element,offset)
  40. {
  41.     var c=0;
  42.     while(element)
  43.     {
  44.         c+=element[offset];
  45.         element=element.offsetParent
  46.     }
  47.     return c;
  48. }
  49. //创建提示层函数 包括提示层和为了避免在文本输入框下面出现select下拉选框时我们的提示层不能再select之上的iframe
  50. //可以理解为当文本输入框下有select下拉选框时从底向上依次为 select下拉选框-iframe-提示层
  51. function createlist()
  52. {
  53. //创建提示层
  54. var listDiv=document.createElement("div");
  55. //提示层id
  56. listDiv.id="rlist";        
  57. listDiv.style.zIndex="2";
  58. listDiv.style.position="absolute";
  59. listDiv.style.border="solid 1px #000000";
  60. listDiv.style.backgroundColor="#FFFFFF";
  61. listDiv.style.display="none";
  62. listDiv.style.width=$('keyword').clientWidth+"px";
  63. listDiv.style.left=getposition($('keyword'),'offsetLeft')+1.5+"px";
  64. listDiv.style.top =(getposition($('keyword'),'offsetTop')+$('keyword').clientHeight +3)+"px";

  66. var listFrame=document.createElement("iframe");
  67. listFrame.id="rFrame";
  68. listFrame.style.zIndex="1";
  69. listFrame.style.position="absolute";
  70. listFrame.style.border="0";
  71. listFrame.style.display="none";
  72. listFrame.style.width=$('keyword').clientWidth+"px";
  73. listFrame.style.left=getposition($('keyword'),'offsetLeft')+1+"px";
  74. listFrame.style.top =(getposition($('keyword'),'offsetTop')+$('keyword').clientHeight +3)+"px";
  75. document.body.appendChild(listDiv);      
  76. document.body.appendChild(listFrame);
  77. }
  78. function setstyle(element,classname)
  79. {
  80. switch (classname)
  81.     {
  82.      case 'm':
  83.        element.style.fontSize="12px";
  84.     element.style.fontFamily="arial,sans-serif";
  85.     element.style.backgroundColor="#3366cc";
  86.     element.style.color="black";
  87.     element.style.width=$('keyword').clientWidth-2+"px";
  88.     element.style.height="20px";
  89.           element.style.padding="1px 0px 0px 2px";
  90.           if(element.displaySpan)element.displaySpan.style.color="white"
  91.     break;
  92.      case 'd':
  93.        element.style.fontSize="12px";
  94.     element.style.fontFamily="arial,sans-serif";
  95.     element.style.backgroundColor="white";
  96.     element.style.color="black";
  97.     element.style.width=$('keyword').clientWidth-2+"px";
  98.     element.style.height="20px";
  99.           element.style.padding="1px 0px 0px 2px";
  100.           if(element.displaySpan)element.displaySpan.style.color="green"
  101.     break;
  102.   case 't':
  103.        element.style.width="80%";
  104.     if(window.navigator.userAgent.toLowerCase().indexOf("firefox")!=-1)element.style.cssFloat="left";
  105.     else element.style.styleFloat="left";
  106.     element.style.whiteSpace="nowrap";
  107.     element.style.overflow="hidden";
  108.     element.style.textOverflow="ellipsis";
  109.     element.style.fontSize="12px";
  110.     element.style.textAlign="left";
  111.     break;
  112.   case 'h':
  113.        element.style.width="20%";
  114.     if(window.navigator.userAgent.toLowerCase().indexOf("firefox")!=-1)element.style.cssFloat="right";
  115.     else element.style.styleFloat="right";
  116.     element.style.textAlign="right";
  117.     element.style.color="green";
  118.     break;
  119.     }
  120. }
  121. function focusitem(index)
  122. {
  123.   if($('item'+lastindex)!=null)setstyle($('item'+lastindex),'d');
  124.   if($('item'+index)!=null)
  125.   {
  126.    setstyle($('item'+index), 'm');
  127.    lastindex=index;
  128.   }
  129.   else $("keyword").focus();
  130. }
  131. function searchclick(index)
  132. {
  133.   $("keyword").value=$('title'+index).innerHTML;
  134.   flag=true;
  135. }
  136. function searchkeydown(e)
  137. {
  138. if($('rlist').innerHTML=='')return;
  139.   var keycode=(window.navigator.appName=="Microsoft Internet Explorer")?event.keyCode:e.which;
  140.   //down
  141.   if(keycode==40)
  142.   {
  143. if(lastindex==-1||lastindex==listlength-1)
  144. {
  145.   focusitem(0);
  146.   searchclick(0);
  147. }
  148. else{
  149.   focusitem(lastindex+1);
  150.   searchclick(lastindex+1);
  151. }
  152.   }
  153. if(keycode==38)
  154. {
  155. if(lastindex==-1)
  156. {
  157.   focusitem(0);
  158.   searchclick(0);
  159. }
  160. else{
  161.   focusitem(lastindex-1);
  162.   searchclick(lastindex-1);
  163. }
  164. }
  165. if(keycode==13)
  166. {
  167.   focusitem(lastindex);
  168.   $("keyword").value=$('title'+lastindex).innerText;
  169. }   
  170. if(keycode==46||keycode==8){flag=false;ajaxsearch($F('keyword').substring(0,$F('keyword').length-1).Trim());}
  171. }
  172. function showresult(xmlhttp)
  173. {
  174. var result=unescape(xmlhttp.responseText);
  175. if(result!=''){
  176.     var resultstring=new StringBuffer();
  177.        var title=result.split('搜索框[code]
  178. <form id="form1" name="form1" method="post" action="">
  179.      　<b>输入搜索关键字</b>
  180.     <input name="keyword" type="text" class="inputblue" id="keyword" maxlength="20" style="width:300px;" />
  181. </form>
复制代码
就这些，没加说明，有时间再加吧，加的话 可以去我的博客看看http://www.xqbar.com/read.php?6)[0];
       var hits=result.split('搜索框[        DISCUZ_CODE_3        ]就这些，没加说明，有时间再加吧，加的话 可以去我的博客看看http://www.xqbar.com/read.php?6.$hits;?>[/code]js代码[        DISCUZ_CODE_2        ]搜索框[        DISCUZ_CODE_3        ]就这些，没加说明，有时间再加吧，加的话 可以去我的博客看看http://www.xqbar.com/read.php?6)[1];
    for(var i=0;i<title.split('|').length;i++)
    {
    resultstring.append('<div id="item'+i+'">');
    resultstring.append('<span id=title'+i+'>');
    resultstring.append(title.split('|'));
    resultstring.append('</span>');
    resultstring.append('<span id=hits'+i+'>');
    resultstring.append(hits.split('|'));
    resultstring.append('</span>');
    resultstring.append('</div>');
    }
    $('rlist').innerHTML=resultstring.tostring();
    for(var j=0;j<title.split('|').length;j++)
    {
     setstyle($('item'+j),'d');
  $('item'+j).displaySpan=$('hits'+j);
     setstyle($('title'+j),'t');
     setstyle($('hits'+j),'h');
    }
    showsearch(title.split('|').length);
    listlength=title.split('|').length;
    lastindex=-1;
}
else hiddensearch();
}
function ajaxsearch(value)
{
new Ajax.Request('search.php',{method:"get",parameters:"action=do&keyword="+escape(value),onComplete:showresult});
}
function main()
{
$('keyword').className=$('keyword').className=='inputblue'?'inputfocus':'inputblue';
if($F('keyword').Trim()=='')hiddensearch();
else
{
      if($F('keyword')!=''&&flag==false)ajaxsearch($F('keyword').Trim());
   if(listlength!=0)$('keyword').onkeydown=searchkeydown;
   else hiddensearch();
}
}
function oninit()
{
$('keyword').autocomplete="off";
$('keyword').onfocus=main;
$('keyword').onkeyup=main;
$('keyword').onblur=hiddensearch;
createlist();
}
Event.observe(window,'load',oninit);
</script>[/code]搜索框[        DISCUZ_CODE_3        ]就这些，没加说明，有时间再加吧，加的话 可以去我的博客看看http://www.xqbar.com/read.php?6.$hits;?>[/code]js代码[        DISCUZ_CODE_2        ]搜索框[        DISCUZ_CODE_3        ]就这些，没加说明，有时间再加吧，加的话 可以去我的博客看看http://www.xqbar.com/read.php?6)[0];
       var hits=result.split('搜索框[        DISCUZ_CODE_3        ]就这些，没加说明，有时间再加吧，加的话 可以去我的博客看看http://www.xqbar.com/read.php?6)[0];
       var hits=result.split('搜索框[        DISCUZ_CODE_3        ]就这些，没加说明，有时间再加吧，加的话 可以去我的博客看看http://www.xqbar.com/read.php?6.$hits;?>[/code]js代码[        DISCUZ_CODE_2        ]搜索框[        DISCUZ_CODE_3        ]就这些，没加说明，有时间再加吧，加的话 可以去我的博客看看http://www.xqbar.com/read.php?6)[1];
    for(var i=0;i<title.split('|').length;i++)
    {
    resultstring.append('<div id="item'+i+'">');
    resultstring.append('<span id=title'+i+'>');
    resultstring.append(title.split('|'));
    resultstring.append('</span>');
    resultstring.append('<span id=hits'+i+'>');
    resultstring.append(hits.split('|'));
    resultstring.append('</span>');
    resultstring.append('</div>');
    }
    $('rlist').innerHTML=resultstring.tostring();
    for(var j=0;j<title.split('|').length;j++)
    {
     setstyle($('item'+j),'d');
  $('item'+j).displaySpan=$('hits'+j);
     setstyle($('title'+j),'t');
     setstyle($('hits'+j),'h');
    }
    showsearch(title.split('|').length);
    listlength=title.split('|').length;
    lastindex=-1;
}
else hiddensearch();
}
function ajaxsearch(value)
{
new Ajax.Request('search.php',{method:"get",parameters:"action=do&keyword="+escape(value),onComplete:showresult});
}
function main()
{
$('keyword').className=$('keyword').className=='inputblue'?'inputfocus':'inputblue';
if($F('keyword').Trim()=='')hiddensearch();
else
{
      if($F('keyword')!=''&&flag==false)ajaxsearch($F('keyword').Trim());
   if(listlength!=0)$('keyword').onkeydown=searchkeydown;
   else hiddensearch();
}
}
function oninit()
{
$('keyword').autocomplete="off";
$('keyword').onfocus=main;
$('keyword').onkeyup=main;
$('keyword').onblur=hiddensearch;
createlist();
}
Event.observe(window,'load',oninit);
</script>[/code]搜索框[        DISCUZ_CODE_3        ]就这些，没加说明，有时间再加吧，加的话 可以去我的博客看看http://www.xqbar.com/read.php?6.$hits;?>[/code]js代码[        DISCUZ_CODE_2        ]搜索框[        DISCUZ_CODE_3        ]就这些，没加说明，有时间再加吧，加的话 可以去我的博客看看http://www.xqbar.com/read.php?6)[1];
    for(var i=0;i<title.split('|').length;i++)
    {
    resultstring.append('<div id="item'+i+'">');
    resultstring.append('<span id=title'+i+'>');
    resultstring.append(title.split('|'));
    resultstring.append('</span>');
    resultstring.append('<span id=hits'+i+'>');
    resultstring.append(hits.split('|'));
    resultstring.append('</span>');
    resultstring.append('</div>');
    }
    $('rlist').innerHTML=resultstring.tostring();
    for(var j=0;j<title.split('|').length;j++)
    {
     setstyle($('item'+j),'d');
  $('item'+j).displaySpan=$('hits'+j);
     setstyle($('title'+j),'t');
     setstyle($('hits'+j),'h');
    }
    showsearch(title.split('|').length);
    listlength=title.split('|').length;
    lastindex=-1;
}
else hiddensearch();
}
function ajaxsearch(value)
{
new Ajax.Request('search.php',{method:"get",parameters:"action=do&keyword="+escape(value),onComplete:showresult});
}
function main()
{
$('keyword').className=$('keyword').className=='inputblue'?'inputfocus':'inputblue';
if($F('keyword').Trim()=='')hiddensearch();
else
{
      if($F('keyword')!=''&&flag==false)ajaxsearch($F('keyword').Trim());
   if(listlength!=0)$('keyword').onkeydown=searchkeydown;
   else hiddensearch();
}
}
function oninit()
{
$('keyword').autocomplete="off";
$('keyword').onfocus=main;
$('keyword').onkeyup=main;
$('keyword').onblur=hiddensearch;
createlist();
}
Event.observe(window,'load',oninit);
</script>[/code]搜索框[        DISCUZ_CODE_3        ]就这些，没加说明，有时间再加吧，加的话 可以去我的博客看看http://www.xqbar.com/read.php?6)[0];
       var hits=result.split('搜索框[        DISCUZ_CODE_3        ]就这些，没加说明，有时间再加吧，加的话 可以去我的博客看看http://www.xqbar.com/read.php?6.$hits;?>[/code]js代码[        DISCUZ_CODE_2        ]搜索框[        DISCUZ_CODE_3        ]就这些，没加说明，有时间再加吧，加的话 可以去我的博客看看http://www.xqbar.com/read.php?6)[1];
    for(var i=0;i<title.split('|').length;i++)
    {
    resultstring.append('<div id="item'+i+'">');
    resultstring.append('<span id=title'+i+'>');
    resultstring.append(title.split('|'));
    resultstring.append('</span>');
    resultstring.append('<span id=hits'+i+'>');
    resultstring.append(hits.split('|'));
    resultstring.append('</span>');
    resultstring.append('</div>');
    }
    $('rlist').innerHTML=resultstring.tostring();
    for(var j=0;j<title.split('|').length;j++)
    {
     setstyle($('item'+j),'d');
  $('item'+j).displaySpan=$('hits'+j);
     setstyle($('title'+j),'t');
     setstyle($('hits'+j),'h');
    }
    showsearch(title.split('|').length);
    listlength=title.split('|').length;
    lastindex=-1;
}
else hiddensearch();
}
function ajaxsearch(value)
{
new Ajax.Request('search.php',{method:"get",parameters:"action=do&keyword="+escape(value),onComplete:showresult});
}
function main()
{
$('keyword').className=$('keyword').className=='inputblue'?'inputfocus':'inputblue';
if($F('keyword').Trim()=='')hiddensearch();
else
{
      if($F('keyword')!=''&&flag==false)ajaxsearch($F('keyword').Trim());
   if(listlength!=0)$('keyword').onkeydown=searchkeydown;
   else hiddensearch();
}
}
function oninit()
{
$('keyword').autocomplete="off";
$('keyword').onfocus=main;
$('keyword').onkeyup=main;
$('keyword').onblur=hiddensearch;
createlist();
}
Event.observe(window,'load',oninit);
</script>[/code]搜索框[        DISCUZ_CODE_3        ]就这些，没加说明，有时间再加吧，加的话 可以去我的博客看看http://www.xqbar.com/read.php?6.$hits;?>[/code]js代码[        DISCUZ_CODE_2        ]搜索框[        DISCUZ_CODE_3        ]就这些，没加说明，有时间再加吧，加的话 可以去我的博客看看http://www.xqbar.com/read.php?6

[ 本帖最后由 omcmc 于 2009-4-11 15:43 编辑 ]
附件: 您所在的用户组无法下载或查看附件
本主题由 luzhou 于 2009-4-15 18:53 下沉
收藏 分享 评分
回复 引用

订阅 TOP

逆雪寒

版主

Rank: 7Rank: 7Rank: 7

第一颗象牙第二颗象牙
2#
发表于 2008-1-25 11:02 | 只看该作者
十分好。赞一个
我心因何恼春风
回复 引用

TOP

小菜鸟

大象

Rank: 3Rank: 3
3#
发表于 2008-1-25 12:27 | 只看该作者
哎哟,不错的东西..
有注释就更好了..

[ 本帖最后由 小菜鸟 于 2008-1-25 12:42 编辑 ]
回复 引用

TOP

airwin

十象

Rank: 4
4#
发表于 2008-1-25 14:33 | 只看该作者
prototype库好大。。
回复 引用

TOP

枫叶

大象

Rank: 3Rank: 3
5#
发表于 2008-1-25 16:55 | 只看该作者
2009年，努力、努力再努力! 学习、学习在学习! http://www.bashu51.com/
回复 引用

TOP

fgpgy

大象

Rank: 3Rank: 3
6#
发表于 2008-1-25 22:37 | 只看该作者
...顶下
回复 引用

TOP

liynid

象

Rank: 2
7#
发表于 2008-1-25 23:28 | 只看该作者
顶一个...
回复 引用

TOP

arlene

象

Rank: 2
8#
发表于 2008-1-26 09:09 | 只看该作者

回复 1# 的帖子
回复 引用

TOP

chinafla

象

Rank: 2
9#
发表于 2008-1-26 13:55 | 只看该作者
支持~~~
回复 引用

TOP

leegangk

大象

Rank: 3Rank: 3
10#
发表于 2008-1-26 14:18 | 只看该作者
PEA重庆联系方式：QQ群：39845061
加入重庆地区PHP人才库,请发短信到 小李 13648305947
回复 引用

TOP

12345678910... 39
返回列表