搜索
首页php教程php手册ajax之搜索提示

ajax之搜索提示

Jun 13, 2016 am 10:35 AM
ajaxcreatetable代码内容剪贴板复制提示搜索数据库

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

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 前后对应 复制内容到剪贴板
代码:

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  {
   $title=$title."|";
   $hits=$hits."|";
  }
  $i++;
    }
   }
   mysql_close();
}
?>
js代码 复制内容到剪贴板
代码:


引入prototye.js有朋友说这个库太大,或者把,不习惯的朋友可以使用jquery.js框架或者直接创建ajax对象,这个我就不想说了,这里直接引用prototye.js框架

创建层和显示查询结果的js代码

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";
&nb

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具