When using Baidu Google, we will find that as long as we enter a word, there will be relevant prompts. This has greatly improved the experience of the website. Now I will learn with you a php+mysql+ajax imitation Baidu Google search. Example of drop-down automatic prompt box effect.
I wrote it a long time ago, and now I have a blog to share with you. The principle of imitating Baidu and Google search drop-down automatic prompts is not very complicated, mainly through the ajax bridge. It is not as powerful as Baidu. It can match pinyin and so on. I really can't do it at my current level. I just want to achieve this effect.
Let’s take a look at the source code, there is analysis and source code download at the end
Database, we save it and import it into mysql database
The code is as follows
Copy code
代码如下
复制代码
/*
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');
/*
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 reader download', '32');
INSERT INTO `article` VALUES ('4', 'pptv', '52');
INSERT INTO `article` VALUES ('5', 'photoshop', '58');
INSERT INTO `article` VALUES ('6', 'photoshop cs5 serial number', '26');
INSERT INTO `article` VALUES ('7', 'phpcms', '56');
INSERT INTO `article` VALUES ('8', 'phpnow', '10');
INSERT INTO `article` VALUES ('9', 'How to open php file', '18');
INSERT INTO `article` VALUES ('10', 'php development', '6');
INSERT INTO `article` VALUES ('11', 'php learning', '158');
INSERT INTO `article` VALUES ('12', 'php tutorial', '88');
$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);
These are the core codes, with a complete example download address at the back
Let’s take a look at the effect first (go below, you can download the source code^_^)
The effect after entering a “p”
A match will be made for each character entered
The effect is like this. If you think it is okay, you can download the source code below to play with it.
I have only added about 10 pieces of data to the data table. If necessary, you can add it yourself.
Full instance download address: Source code download
http://www.bkjia.com/PHPjc/632718.htmlwww.bkjia.comtruehttp: //www.bkjia.com/PHPjc/632718.htmlTechArticleWhen using Baidu Google, we will find that as long as we enter a word, there will be relevant prompts. This is a good improvement. Now that I have experienced the website, let me learn a php+ with you...
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
