ajax之搜索提示
时间:2008-01-25
来源:互联网
博客现在由于空间问题暂时关闭,所以实例效果现在已经无法看到,如果你有问题可以qq我:174171262
截图:[attach]***[/attach]
效果页面:http://www.xqbar.com/demo/ajaxsearch/search.html
代码下载:
数据库表:
代码:
CREATE TABLE `xqbar`.`suggest` (
`id` INT NOT NULL AUTO_INCREMENT ,
`title` VARCHAR( 100 ) NOT NULL ,
`hits` INT NOT NULL DEFAULT '0',
PRIMARY KEY ( `id` )
) ENGINE = InnoDB
insert into suggest(title,hits)values('xqbar.com',100);
insert into suggest(title,hits)values('www.xqbar.com',410);
insert into suggest(title,hits)values('http://xqbar.com',700);
insert into suggest(title,hits)values('mail:xqbar.com',200);
insert into suggest(title,hits)values('ftp:xqbar.com',100);
insert into suggest(title,hits)values('http://www.xqbar.com',70)
(关于php我也是接触不久,下面的php如果罗嗦还望高手指点)
返回的信息字符串要为 xxx1|xxx2$200|100 前后对应
代码:
<?php
if($_GET["action"]!=''){
#获取用户输入的关键字
$keyword=$_GET["keyword"];
#过滤关键字
$keyword=str_replace("[","[[]",$keyword);
$keyword=str_replace("&","[&]",$keyword);
$keyword=str_replace("%","[%]",$keyword);
$keyword=str_replace("^","[^]",$keyword);
#链接数据库
$conn=mysql_connect("localhost","xqbar","xqbaradmin");
#选择数据库
@mysql_select_db("xqbar") or die('sorry');
mysql_query('set names utf-8');
#查询语句
$sql="select title,hits from suggest where title like '%".$keyword."%' order by hits desc limit 10";
$result=mysql_query($sql);
#循环得到查询结果,返回字符串
#格式为 结果1|结果2$结果1点击次数|结果2点击次数
if($result){
$i=1;$title='';$hits='';
while($row=mysql_fetch_array($result,MYSQL_BOTH))
{
$title=$title.$row['title'];
$hits=$hits.$row['hits'];
if($i<mysql_num_rows($result))
{
$title=$title."|";
$hits=$hits."|";
}
$i++;
}
}
mysql_close();
}
?>
<?php echo $title.'$'.$hits;?>
代码:
引入prototye.js有朋友说这个库太大,或者把,不习惯的朋友可以使用jquery.js框架或者直接创建ajax对象,这个我就不想说了,这里直接引用prototye.js框架
<script type="text/javascript" src="prototype.js"></script>
创建层和显示查询结果的js代码
<script type="text/javascript">
//定义变量lastindex 表示为鼠标在查询结果上滑动所在位置,初始为-1
var lastindex=-1;
//定义变量flag 表示是否根据用户输入的关键字进行ajax查询,flase为允许查询 true为禁止查询
var flag=false;
//返回的查询结果生成的数组长度
var listlength=0;
//创建自定字符串,优化效率
function StringBuffer(){this.data=[];}
//赋值
StringBuffer.prototype.append=function(){this.data.push(arguments[0]);return this;}
//输出
StringBuffer.prototype.tostring=function(){return this.data.join("");}
//去掉字符串两边空格
String.prototype.Trim = function(){return this.replace(/(^\s*)|(\s*$)/g, "");}
//隐藏函数 主要是隐藏显示的提示下拉层和iframe,关于iframe下面在说其作用
function hiddensearch()
{
$('rlist').style.display="none";
$('rFrame').style.display="none";
}
//显示函数 主要是显示的提示下拉层和iframe 参数num,根据该参数控制要显示提示层和iframe的高度
function showsearch(num)
{
$('rlist').style.display='';
$('rFrame').style.display='';
//这里我定义每个返回查询结果的提示高度为20px,其中提示层总高度又加了num,是因为我在定义样式时使用了padding一个像素
$('rlist').style.height=num*20+num+'px';
//同样定位iframe的高度
$('rFrame').style.height=num*20+num+'px';
}
//返回文本输入框的坐标函数,参数element为要返回的对象,参数offset可选为offsetLeft|offsetTop 分别表示为该对象距离左窗口上角的绝对位置
//利用这个函数可以定位我们要显示的提示层位置,使提示层正确的显示在文本输入框下面
function getposition(element,offset)
{
var c=0;
while(element)
{
c+=element[offset];
element=element.offsetParent
}
return c;
}
//创建提示层函数 包括提示层和为了避免在文本输入框下面出现select下拉选框时我们的提示层不能再select之上的iframe
//可以理解为当文本输入框下有select下拉选框时从底向上依次为 select下拉选框-iframe-提示层
function createlist()
{
//创建提示层
var listDiv=document.createElement("div");
//提示层id
listDiv.id="rlist";
listDiv.style.zIndex="2";
listDiv.style.position="absolute";
listDiv.style.border="solid 1px #000000";
listDiv.style.backgroundColor="#FFFFFF";
listDiv.style.display="none";
listDiv.style.width=$('keyword').clientWidth+"px";
listDiv.style.left=getposition($('keyword'),'offsetLeft')+1.5+"px";
listDiv.style.top =(getposition($('keyword'),'offsetTop')+$('keyword').clientHeight +3)+"px";
var listFrame=document.createElement("iframe");
listFrame.id="rFrame";
listFrame.style.zIndex="1";
listFrame.style.position="absolute";
listFrame.style.border="0";
listFrame.style.display="none";
listFrame.style.width=$('keyword').clientWidth+"px";
listFrame.style.left=getposition($('keyword'),'offsetLeft')+1+"px";
listFrame.style.top =(getposition($('keyword'),'offsetTop')+$('keyword').clientHeight +3)+"px";
document.body.appendChild(listDiv);
document.body.appendChild(listFrame);
}
function setstyle(element,classname)
{
switch (classname)
{
case 'm':
element.style.fontSize="12px";
element.style.fontFamily="arial,sans-serif";
element.style.backgroundColor="#3366cc";
element.style.color="black";
element.style.width=$('keyword').clientWidth-2+"px";
element.style.height="20px";
element.style.padding="1px 0px 0px 2px";
if(element.displaySpan)element.displaySpan.style.color="white"
break;
case 'd':
element.style.fontSize="12px";
element.style.fontFamily="arial,sans-serif";
element.style.backgroundColor="white";
element.style.color="black";
element.style.width=$('keyword').clientWidth-2+"px";
element.style.height="20px";
element.style.padding="1px 0px 0px 2px";
if(element.displaySpan)element.displaySpan.style.color="green"
break;
case 't':
element.style.width="80%";
if(window.navigator.userAgent.toLowerCase().indexOf("firefox")!=-1)element.style.cssFloat="left";
else element.style.styleFloat="left";
element.style.whiteSpace="nowrap";
element.style.overflow="hidden";
element.style.textOverflow="ellipsis";
element.style.fontSize="12px";
element.style.textAlign="left";
break;
case 'h':
element.style.width="20%";
if(window.navigator.userAgent.toLowerCase().indexOf("firefox")!=-1)element.style.cssFloat="right";
else element.style.styleFloat="right";
element.style.textAlign="right";
element.style.color="green";
break;
}
}
function focusitem(index)
{
if($('item'+lastindex)!=null)setstyle($('item'+lastindex),'d');
if($('item'+index)!=null)
{
setstyle($('item'+index), 'm');
lastindex=index;
}
else $("keyword").focus();
}
function searchclick(index)
{
$("keyword").value=$('title'+index).innerHTML;
flag=true;
}
function searchkeydown(e)
{
if($('rlist').innerHTML=='')return;
var keycode=(window.navigator.appName=="Microsoft Internet Explorer")?event.keyCode:e.which;
//down
if(keycode==40)
{
if(lastindex==-1||lastindex==listlength-1)
{
focusitem(0);
searchclick(0);
}
else{
focusitem(lastindex+1);
searchclick(lastindex+1);
}
}
if(keycode==38)
{
if(lastindex==-1)
{
focusitem(0);
searchclick(0);
}
else{
focusitem(lastindex-1);
searchclick(lastindex-1);
}
}
if(keycode==13)
{
focusitem(lastindex);
$("keyword").value=$('title'+lastindex).innerText;
}
if(keycode==46||keycode==8){flag=false;ajaxsearch($F('keyword').substring(0,$F('keyword').length-1).Trim());}
}
function showresult(xmlhttp)
{
var result=unescape(xmlhttp.responseText);
if(result!=''){
var resultstring=new StringBuffer();
var title=result.split('$')[0];
var hits=result.split('$')[1];
for(var i=0;i<title.split('|').length;i++)
{
resultstring.append('<div id="item'+i+'" onmousemove="focusitem('+i+')" onmousedown="searchclick('+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>
代码:
<form id="form1" name="form1" method="post" action="">
<b>输入搜索关键字</b>
<input name="keyword" type="text" class="inputblue" id="keyword" maxlength="20" style="width:300px;" />
</form>
[ 本帖最后由 omcmc 于 2008-7-7 01:22 编辑 ]
作者: omcmc 发布时间: 2008-01-25

作者: 逆雪寒 发布时间: 2008-01-25
有注释就更好了..
[ 本帖最后由 小菜鸟 于 2008-1-25 12:42 编辑 ]
作者: 小菜鸟 发布时间: 2008-01-25
作者: airwin 发布时间: 2008-01-25


作者: 枫叶 发布时间: 2008-01-25
作者: fgpgy 发布时间: 2008-01-25
作者: liynid 发布时间: 2008-01-25


作者: arlene 发布时间: 2008-01-26
作者: chinafla 发布时间: 2008-01-26



作者: leegangk 发布时间: 2008-01-26
like.. 效率极低
作者: scauren 发布时间: 2008-01-29
作者: hu_bird 发布时间: 2008-01-30
作者: liangpz521 发布时间: 2008-01-30
作者: cookies 发布时间: 2008-01-30
作者: ice1976 发布时间: 2008-01-31
作者: niutian365 发布时间: 2008-01-31
作者: hzy2008 发布时间: 2008-02-01

作者: 小星 发布时间: 2008-02-01

作者: hackercom 发布时间: 2008-02-01


支持一下下
作者: 艾克 发布时间: 2008-02-02
作者: phper1001 发布时间: 2008-02-02
作者: entermaster 发布时间: 2008-02-02
作者: phper1001 发布时间: 2008-02-02
作者: omcmc 发布时间: 2008-02-03
作者: ※紫�� 发布时间: 2008-02-14
作者: huang184 发布时间: 2008-02-15
作者: wdpchange 发布时间: 2008-02-15
作者: dujiangtao 发布时间: 2008-02-15


作者: jemmy117 发布时间: 2008-02-15
作者: wangyl 发布时间: 2008-02-16
作者: yuen 发布时间: 2008-02-16


作者: luzhou 发布时间: 2008-02-16
作者: lions 发布时间: 2008-02-16

作者: 特蓝克斯 发布时间: 2008-02-16
作者: j59280871 发布时间: 2008-02-18
作者: ioioj5 发布时间: 2008-02-19
作者: anyforever 发布时间: 2008-02-19
作者: tangmingsheng 发布时间: 2008-02-19
作者: chyoqin 发布时间: 2008-02-19
作者: 307142441 发布时间: 2008-02-20

作者: quanhaier 发布时间: 2008-02-20
作者: ct_174880859 发布时间: 2008-02-20



作者: qzqfirst 发布时间: 2008-02-20
作者: sinhay 发布时间: 2008-02-21

作者: saturnine 发布时间: 2008-02-21



作者: wedypei 发布时间: 2008-02-21
作者: cupdir 发布时间: 2008-02-23
作者: mic78 发布时间: 2008-02-23
作者: amanious 发布时间: 2008-02-24
作者: hakumatata 发布时间: 2008-02-24


作者: feiyun1999 发布时间: 2008-02-25
作者: delinking 发布时间: 2008-02-26
作者: chaguifei 发布时间: 2008-02-27

作者: caihu12345678 发布时间: 2008-02-29
作者: winglechen 发布时间: 2008-03-01
作者: wuxp 发布时间: 2008-03-05
作者: Mk.Liang 发布时间: 2008-03-06




作者: jsrgqinbin 发布时间: 2008-03-06
作者: szhanszhan 发布时间: 2008-03-08
作者: xiaobaby87 发布时间: 2008-03-10
作者: hahajohn 发布时间: 2008-03-10
作者: yy18 发布时间: 2008-03-10

作者: lshfong 发布时间: 2008-03-10

作者: ct_174880859 发布时间: 2008-03-12
作者: xiyuanwzq 发布时间: 2008-03-12

作者: jaoooo 发布时间: 2008-03-13
作者: fearwall 发布时间: 2008-03-14
作者: janus_0808 发布时间: 2008-03-14



作者: designline 发布时间: 2008-03-17
作者: teamoustar 发布时间: 2008-03-17
作者: 白杨 发布时间: 2008-03-17
作者: wybmzyb 发布时间: 2008-03-18
作者: qqsheji 发布时间: 2008-03-18

作者: luzhou 发布时间: 2008-03-18
作者: linuxxp 发布时间: 2008-03-19


作者: naodai 发布时间: 2008-03-19


作者: FrogPrince 发布时间: 2008-03-19
作者: macgroup 发布时间: 2008-03-20
作者: michaeljoney 发布时间: 2008-03-21
作者: benero 发布时间: 2008-03-21
作者: lxydyx 发布时间: 2008-03-21
作者: psliaowen 发布时间: 2008-03-22



作者: teng19820 发布时间: 2008-03-22

作者: kupe 发布时间: 2008-03-24
作者: panjinww 发布时间: 2008-03-25
作者: kth007 发布时间: 2008-03-25


作者: paciwater 发布时间: 2008-03-25
作者: luzhou 发布时间: 2008-03-25

作者: 清竹�w翔 发布时间: 2008-03-27
作者: phpcaicai 发布时间: 2008-03-27



作者: gg5g321 发布时间: 2008-03-28
作者: webCool 发布时间: 2008-04-02
作者: 清竹�w翔 发布时间: 2008-04-03
作者: yi哥 发布时间: 2008-04-06
作者: catpi 发布时间: 2008-04-07
作者: gray 发布时间: 2008-04-10
作者: ant586 发布时间: 2008-04-10
作者: boysky85 发布时间: 2008-04-12
作者: laopi 发布时间: 2008-04-14
jquery .js + autocomplete_jquery.js 可以实现这个功能 不过官方的那个插件比起楼主的页面效果差远了。
作者: CFC4N 发布时间: 2008-04-15
作者: hu_bird 发布时间: 2008-04-16

作者: fly1983 发布时间: 2008-04-16
作者: swin.wang 发布时间: 2008-04-16
作者: gzphp 发布时间: 2008-04-18
作者: jhcknde 发布时间: 2008-04-18
作者: jhcknde 发布时间: 2008-04-18
作者: zhxhcj 发布时间: 2008-04-18
作者: tanp520 发布时间: 2008-04-20
我都要�_始�WPHP了...55
作者: xwfoo 发布时间: 2008-04-20
作者: carlkyo 发布时间: 2008-04-21
作者: china-php 发布时间: 2008-04-21
作者: windy2coast 发布时间: 2008-04-21
作者: li_kun1 发布时间: 2008-04-21
作者: benben3221987 发布时间: 2008-04-23

作者: fangkm 发布时间: 2008-04-23
作者: flourish 发布时间: 2008-04-23
作者: menglshuai 发布时间: 2008-04-25
作者: sunflower 发布时间: 2008-04-28


作者: xhunter 发布时间: 2008-04-28

作者: owens493 发布时间: 2008-04-28
作者: weifenghuan 发布时间: 2008-04-29
作者: meigm 发布时间: 2008-04-29
作者: canu 发布时间: 2008-04-29
作者: zhongliang 发布时间: 2008-04-29
作者: glem 发布时间: 2008-04-29
作者: ctrlming 发布时间: 2008-04-30
作者: littlehehe 发布时间: 2008-04-30

作者: guanle 发布时间: 2008-05-01

作者: fengye2751 发布时间: 2008-05-05
引用:
原帖由 leehui1983 于 2008-5-6 19:54 发表

作者: zhujbing 发布时间: 2008-05-05
作者: admin2008 发布时间: 2008-05-06
作者: leehui1983 发布时间: 2008-05-06
作者: luzhou 发布时间: 2008-05-06
作者: googhu 发布时间: 2008-05-07
作者: cybmm 发布时间: 2008-05-07
作者: lukui306 发布时间: 2008-05-10
作者: rooming 发布时间: 2008-05-12
作者: omcmc 发布时间: 2008-05-13
作者: keep999 发布时间: 2008-05-14

作者: guantq 发布时间: 2008-05-14
作者: bluebird00 发布时间: 2008-05-21
作者: qiaogqiang 发布时间: 2008-05-22
作者: lordharrd 发布时间: 2008-05-22
作者: aluan2005 发布时间: 2008-05-22
作者: submit 发布时间: 2008-05-23
作者: zzzxxxzzz 发布时间: 2008-05-23
作者: haierspi 发布时间: 2008-05-23
作者: csg800 发布时间: 2008-05-24
作者: jayeeliu 发布时间: 2008-05-25

作者: huangjp 发布时间: 2008-05-27
作者: 花花心 发布时间: 2008-05-28
作者: royzzc 发布时间: 2008-05-28
作者: 啊丢 发布时间: 2008-05-28
作者: ltt0827 发布时间: 2008-05-29
作者: jxncpbs 发布时间: 2008-06-06
作者: simore 发布时间: 2008-06-06
作者: scpzhzjb 发布时间: 2008-06-06

作者: zhongmin1073 发布时间: 2008-06-06
作者: jazz123qwe 发布时间: 2008-06-11

作者: cbnuisve 发布时间: 2008-06-11
作者: hxhui08 发布时间: 2008-06-12
作者: joknang 发布时间: 2008-06-13
作者: chuanniao 发布时间: 2008-06-13
作者: 砖头 发布时间: 2008-06-17
作者: sanp 发布时间: 2008-06-17
作者: smallhe 发布时间: 2008-06-17
作者: microskype 发布时间: 2008-06-17
作者: ymaozi 发布时间: 2008-06-17
作者: 编程小弟 发布时间: 2008-06-17
作者: 编程小弟 发布时间: 2008-06-17
作者: dongxin1390008 发布时间: 2008-06-18
作者: jingyun 发布时间: 2008-06-19
作者: yaosky 发布时间: 2008-06-24

作者: flanksheng 发布时间: 2008-06-24
作者: Raytheame 发布时间: 2008-06-26

作者: Raytheame 发布时间: 2008-06-26
作者: libaiyi 发布时间: 2008-06-26
作者: lhsgod 发布时间: 2008-06-27
作者: Dain 发布时间: 2008-06-30

作者: saku87 发布时间: 2008-06-30
作者: slawdan 发布时间: 2008-07-01
作者: Zerolone 发布时间: 2008-07-01
作者: simore 发布时间: 2008-07-02

作者: teng19820 发布时间: 2008-07-03
作者: xufeng8510 发布时间: 2008-07-03
作者: fly1983 发布时间: 2008-07-04
作者: gbnh82 发布时间: 2008-07-04
作者: sulwan 发布时间: 2008-07-06
作者: courage121 发布时间: 2008-07-06

作者: linzim 发布时间: 2008-07-08

作者: hityy 发布时间: 2008-07-08
作者: 海洋天使 发布时间: 2008-07-08
作者: hahachen 发布时间: 2008-07-10
作者: 渔洋童话 发布时间: 2008-07-12

作者: zyp50725405 发布时间: 2008-07-12


作者: hc.beta 发布时间: 2008-07-13

作者: hanlicun 发布时间: 2008-07-15

作者: 105644107 发布时间: 2008-07-16
作者: rzjdkj 发布时间: 2008-07-16
作者: bush 发布时间: 2008-07-17



作者: million8812 发布时间: 2008-07-18
作者: haohailuo 发布时间: 2008-07-18
每输入一个字符就触发一个LIKE查询,可想而知了
做缓存
作者: dmde 发布时间: 2008-07-18
引用:
原帖由 ikon 于 2008-7-19 14:37 发表很好很强大。赞一个
作者: sy1250 发布时间: 2008-07-18
作者: ikon 发布时间: 2008-07-19
用AJAXQUEUE 不错,

作者: xinzf 发布时间: 2008-07-22
引用:
原帖由 xinzf 于 2008-7-22 09:47 发表这个提示实现起来相当简单,问题是优化
每输入一个字符就触发一个LIKE查询,可想而知了
做缓存
作者: omcmc 发布时间: 2008-07-22
作者: xyliufeng 发布时间: 2008-07-22
作者: ant586 发布时间: 2008-07-25
作者: omcmc 发布时间: 2008-07-25
作者: 秒杀 发布时间: 2008-07-26
作者: cxmz 发布时间: 2008-07-29

作者: leidong8 发布时间: 2008-07-29
作者: alphalwei 发布时间: 2008-07-30
作者: jeccy 发布时间: 2008-08-01
作者: richardhc 发布时间: 2008-08-04
作者: zhangjianbo 发布时间: 2008-08-09
作者: yuaccp2 发布时间: 2008-08-09
作者: 风吟 发布时间: 2008-08-10
作者: spirit_mly 发布时间: 2008-08-11
作者: yokelduhao 发布时间: 2008-08-11




作者: joj_79 发布时间: 2008-08-11



作者: jianzhong111 发布时间: 2008-08-12

作者: langyufeng 发布时间: 2008-08-13


作者: bc523 发布时间: 2008-08-14
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读:74
-
如何安装mysql8.0
阅读:31
-
Word快速设置标题样式步骤详解
阅读:28
-
20+道必知必会的Vue面试题(附答案解析)
阅读:37
-
HTML如何制作表单
阅读:22
-
百词斩可以改天数吗?当然可以,4个步骤轻松修改天数!
阅读:31
-
ET文件格式和XLS格式文件之间如何转化?
阅读:24
-
react和vue的区别及优缺点是什么
阅读:121
-
支付宝人脸识别如何关闭?
阅读:21
-
腾讯微云怎么修改照片或视频备份路径?
阅读:28