php+mysql+ajax仿百度谷歌搜索下拉自动提示框效果
使用百度google时我们都会发现只要输入一个字就会有相关提示内容了，这个很好的提升了网站的体验了，下面我来与大家一起学习一个php+mysql+ajax仿百度谷歌搜索下拉自动提示框效果实例。
很久以前就写了，现在拿到博客给大家分享一下。仿百度谷歌搜索下拉自动提示原理并不是很复杂，主要就是通过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> <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来条数据，如果有需要，可以自己添加。
整实例下载地址:源码下载
教程地址：http://www.phprm.com/code/55963.html
欢迎转载！但请带上文章地址^^