ajax之搜索提示

【字号：大中小】日期：2023-09-01 16:05:56浏览：68作者：馨心

数据库表：复制内容到剪贴板代码:

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)search.php(关于php我也是接触不久，下面的php如果罗嗦还望高手指点)返回的信息字符串要为 xxx1|xxx2$200|100 前后对应复制内容到剪贴板代码:

<?phpif($_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;?>js代码复制内容到剪贴板代码:

引入prototye.js有朋友说这个库太大，或者把，不习惯的朋友可以使用jquery.js框架或者直接创建ajax对象，这个我就不想说了，这里直接引用prototye.js框架<script type='text/javascript' src='https://www.uahao.com/bcjs/prototype.js'></script>创建层和显示查询结果的js代码<script type='text/javascript'>//定义变量lastindex 表示为鼠标在查询结果上滑动所在位置，初始为-1var 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 分别表示为该对象距离左窗口上角的绝对位置//www.devdao.com 利用这个函数可以定位我们要显示的提示层位置，使提示层正确的显示在文本输入框下面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');//提示层idlistDiv. 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';

<form name='form1' method='post' action=''> 　<b>输入搜索关键字</b> <input name='keyword' type='text' maxlength='20' /> </form>

PHP

上一条：ajax无刷新分页,支持id定位下一条：重载和类的自动加载