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

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

WBOY
풀어 주다: 2016-06-13 09:51:22
원래의
1162명이 탐색했습니다.

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

 代码如下 复制代码





searchSuggest




 


 

  
  
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿