php+mysql+ajax仿百度谷歌搜索下拉自动提示框效果_PHP教程

使用百度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

代码如下	复制代码