Php+mysql+ajax imitation Baidu Google search dropdown automatic cue box effect _php tutorial

Source: Internet
Author: User
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+ ...

  • Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.