ajax实现搜索提示功能 （关键字自动匹配功能）

 

大家都使用过google或者xunlei的搜索，输入关键字后可以出现相关提示，是个不错的功能，今天就在这里给大家把我的拙作给大家分享截图：效果页面：http://www.xqbar.com/demo/ajaxsearch/search.html 代码下载： http://www.xqbar.com/demo/ajaxsearch/search.html 数据库表：

CODE:

[Copy to clipboard]

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 前后对应

CODE:

[Copy to clipboard]

大家都使用过google或者xunlei的搜索，输入关键字后可以出现相关提示，是个不错的功能，今天就在这里给大家把我的拙作给大家分享截图：效果页面：http://www.xqbar.com/demo/ajaxsearch/search.html 代码下载： http://www.xqbar.com/demo/ajaxsearch/search.html 数据库表：

CODE:

[Copy to clipboard]

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 前后对应

CODE:

[Copy to clipboard]

___FCKpd___1

js 代码

CODE:

[Copy to clipboard]

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

 创建层和显示查询结果的js代码  
  搜索框 
  
 
   CODE: 
  
 
  
 
   [Copy to clipboard] 
  
 
  
 
     
   
___FCKpd___3
 
  
 
  

      
  
 GET["action"]!=''){ #获取用户输入的关键字 $keyword=  
  
 
   大家都使用过google或者xunlei的搜索，输入关键字后可以出现相关提示，是个不错的功能，今天就在这里给大家把我的拙作给大家分享截图：效果页面：http://www.xqbar.com/demo/ajaxsearch/search.html 代码下载： http://www.xqbar.com/demo/ajaxsearch/search.html 数据库表： 
  
 
  
 
   CODE: 
  
 
  
 
   [Copy to clipboard] 
  
 
  
 
     
   
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 前后对应 
  
 
  
 
   CODE: 
  
 
  
 
   [Copy to clipboard] 
  
 
  
 
     
   
___FCKpd___1
 js 
   代码 
  
 
  
 
   CODE: 
  
 
  
 
   [Copy to clipboard] 
  
 
  
 
    
   引入prototye.js有朋友说这个库太大，或者把，不习惯的朋友可以使用jquery.js框架或者直接创建ajax对象，这个我就不想说了，这里直接引用prototye.js框架  
   
___FCKpd___2
 
   搜索框 
  
 
  
 
   CODE: 
  
 
  
 
   [Copy to clipboard] 
  
 
  
 
     
   
___FCKpd___3
 
  
 
  

      
  
 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 代码 
  
 
   CODE: 
  
 
  
 
   [Copy to clipboard] 
  
 
  
 
    
   引入prototye.js有朋友说这个库太大，或者把，不习惯的朋友可以使用jquery.js框架或者直接创建ajax对象，这个我就不想说了，这里直接引用prototye.js框架  
   
___FCKpd___2
 
   搜索框 
  
 
  
 
   CODE: 
  
 
  
 
   [Copy to clipboard] 
  
 
  
 
     
   
___FCKpd___3
 
  
 
  

      
  
 .$hits;?> js 
  代码 
  
 
   CODE: 
  
 
  
 
   [Copy to clipboard] 
  
 
  
 
    
   引入prototye.js有朋友说这个库太大，或者把，不习惯的朋友可以使用jquery.js框架或者直接创建ajax对象，这个我就不想说了，这里直接引用prototye.js框架  
   
___FCKpd___2
 
   搜索框 
  
 
  
 
   CODE: 
  
 
  
 
   [Copy to clipboard] 
  
 
  
 
     
   
___FCKpd___3