php+mysql+ajax imitates Baidu Google search drop-down automatic prompt box effect_PHP tutorial

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');

index.html

 代码如下

复制代码

代码如下	复制代码

代码如下

复制代码

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); ?>

 

 

       

 

 

 

getdata.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);<🎜> <🎜>?>

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...