Use Baidu Google when we will find that as long as the input of a word will have relevant hints content, this is very good to enhance the experience of the site, below I come with you to learn a php+mysql+ajax imitation Baidu Google search dropdown automatic prompt box effect instance.
Wrote a long time ago, and now get a blog to share with you. Imitation Baidu Google search pull-down automatic prompt principle is not very complex, mainly through the Ajax bridge. Baidu is not so strong, it can match pinyin, etc., I do not have the level at present, I just realize this effect.
Let's take a look at the source code behind the analysis and download
Database, we save it for import 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 () unsigned not null auto_increment,
' title ' varchar (a) NOT NULL,
' CLI CK ' int (one) not NULL,
PRIMARY key (' id '),
UNIQUE key ' title ' (' title ')
) Engine=myisam auto_increment=13 defaul T 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 ', ' PHP file How to open ', ' 18 ');
INSERT into ' article ' VALUES (' Ten ', ' PHP development ', ' 6 ');
INSERT into ' article ' VALUES (' One ', ' php learning ', ' 158 ');
INSERT into ' article ' VALUES (' n ', ' php tutorial ', ' 88 '); |
Index.html
| The code is as follows |
Copy Code |
Searchsuggest
|
getdata.php file
| The code is as follows |
Copy Code |
Header ("content-type:text/html;charset=gb2312");
Database configuration information (user name, password, database name, table prefix, etc.)
$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");
Prevent garbled characters
$keywords = Iconv ("Utf-8", "Gb2312//ignore", $_post[' keywords ']);
Match input keyword-related titles and rank by click, the more you click on the front of the row
$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) {
Return JSON data
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 code, followed by a full instance download address
First look at the effect of it (go down, there is source download ^_^)
Effect after entering a "p"
One match for each character entered
Effect on this, if you feel OK, you can download the following source to play.
I only added 10 fishes data in the data sheet, and if necessary, I can add it myself.
Full instance download address: Source download
http://www.bkjia.com/PHPjc/632718.html www.bkjia.com true http://www.bkjia.com/PHPjc/632718.html techarticle use Baidu Google when we will find that as long as the input of a word will have relevant hints content, this is a good experience to enhance the site, the following I come with you to learn a php+ ...
