首頁 > 開發者 > MySQL

php+mysql+ajax仿百度Google搜尋下拉自動提示框效果

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！


很久以前就寫了，現在拿到部落格給大家分享一下。仿百度Google搜尋下拉自動提示原理並不是很複雜，主要就是通過ajax這座橋樑。沒有百度那麼強大，它可以匹配拼音等，我目前水平確實做不到，我只是實現一下這個效果。


我們一起看看源碼後面有分析與源碼下載

資料庫，我們把它儲存匯入到mysql資料庫

 代碼如下 複製代碼

/*
Navicat MySQL Data Transfer

Source Server         : localhost
Source Server Version : 50528
Source Host           : localhost:3306
Source Database       : ajaxdemo1

Target Server Type    : MYSQL
Target Server Version : 50528
File Encoding         : 65001

Date: 2013-07-23 17:52:48
*/


SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for `article`
-- ----------------------------
DROP TABLE IF EXISTS `article`;
CREATE TABLE `article` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `title` varchar(64) NOT NULL,
  `click` int(11) NOT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `title` (`title`)
) ENGINE=MyISAM AUTO_INCREMENT=13 DEFAULT CHARSET=gbk;

-- ----------------------------
-- Records of article
-- ----------------------------
INSERT INTO `article` VALUES ('1', 'php', '58');
INSERT INTO `article` VALUES ('2', 'pps', '99');
INSERT INTO `article` VALUES ('3', 'pdf閱讀器下載', '32');
INSERT INTO `article` VALUES ('4', 'pptv', '52');
INSERT INTO `article` VALUES ('5', 'photoshop', '58');
INSERT INTO `article` VALUES ('6', 'photoshop cs5 序號', '26');
INSERT INTO `article` VALUES ('7', 'phpcms', '56');
INSERT INTO `article` VALUES ('8', 'phpnow', '10');
INSERT INTO `article` VALUES ('9', 'php檔案如何開啟', '18');
INSERT INTO `article` VALUES ('10', 'php發展', '6');
INSERT INTO `article` VALUES ('11', 'php學習', '158');
INSERT INTO `article` VALUES ('12', 'php教程', '88');


index.html

 代碼如下 複製代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>searchSuggest</title>
<link href="css/searchSuggest.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/searchSuggest.js"></script>
</head>
 
<body>
<div id="searchSuggest">
 <form action="deal.php" method="get" id="suggest_form">
  <input type="text" name="keywords" id="suggest_input" autocomplete="off"/>
  <input type="submit" value="搜尋一下" id="suggest_submit" />
 </form>
 <ul id="suggest_ul">
 </ul>
</div>
 
</body>
</html>


getdata.php檔案

 代碼如下 複製代碼

<?php
 
 header("Content-type:text/html;charset=gb2312");
 //資料庫配置資訊(使用者名稱,密碼，資料庫名，表首碼等)
 $cfg_dbhost = "localhost";
 $cfg_dbuser = "root";
 $cfg_dbpwd = "dddddd";
 $cfg_dbname = "ajaxdemo1";
 $cfg_dbprefix = "";

 $link = mysql_connect($cfg_dbhost,$cfg_dbuser,$cfg_dbpwd);
 mysql_select_db($cfg_dbname);
 mysql_query("set names gbk");
 //防止亂碼
 $keywords = iconv("utf-8","gb2312//IGNORE",$_POST['keywords']);
 //匹配輸入的關鍵字相關的標題，並按點擊量排名，點擊越多的排最前面
 $sql = "select title from ".$cfg_dbprefix."article where title like '%".$keywords."%' order by click desc limit 0,9;";
 //echo $sql;
 $res = mysql_query($sql,$link);
 
 $mNums = mysql_num_rows($res);
 //echo $mNums;
 $row=mysql_fetch_array($res);
 if($mNums<1){
  echo "no";
  exit();
 }else if($mNums==1){
  //返回json資料
  echo "[{'keywords':'".iconv_substr($row['title'],0,14,"gbk")."'}]";
 }else{
  $result="[{'keywords':'".iconv_substr($row['title'],0,14,"gbk")."'}";
  while($row=mysql_fetch_array($res)){
   $result.=",{'keywords':'".iconv_substr($row['title'],0,14,"gbk")."'}";
  }
  $result.=']';
  echo $result;
 }
 mysql_free_result($res);

?>

這些是核心代碼，後面有完整執行個體下載地址

先看一下效果吧（往下面走，有源碼下載^_^）

輸入一個“p”後的效果


每輸入一個字元都會進行一次匹配

 

效果就這樣，如果覺得還行，可以下載下面的源碼來玩玩。


資料表裡面我只添加了10來條資料，如果有需要，可以自己添加。

 

整執行個體下載地址:源碼下載

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More