search
Homephp教程php手册ajax之搜索提示

ajax之搜索提示

Jun 13, 2016 am 10:35 AM
ajaxcreatetablecodecontentclipboardcopyhintsearchdatabasesurface

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

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

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.