Php + mysql + ajax imitation Baidu Google search drop-down automatic prompt box effect

Source: Internet
Author: User


I wrote it a long time ago. Now I can share it with you through my blog. The principle of the pull-down automatic prompt of Baidu Google search is not very complex, mainly through ajax. It is not as powerful as baidu. It can match pinyin and so on. I can't do it at the current level. I just want to achieve this effect.


Let's take a look at the analysis and download of the source code.

Database. We will save it and import it to the 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 versions: 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 the php file ', '18 ');
Insert into 'article' VALUES ('10', 'php demo', '6 ');
Insert into 'article' VALUES ('11', 'php learn', '123 ');
Insert into 'article' VALUES ('12', 'php ', '88 ');


Index.html

The code is as follows: Copy code

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> searchSuggest </title>
<Link href = "css/searchSuggest.css" type = "text/css" rel = "stylesheet"/>
<Script type = "text/javascript" src = "js/jquery-1.7.2.min.js"> </script>
<Script type = "text/javascript" src = "js/searchSuggest. js"> </script>
</Head>
 
<Body>
<Div id = "searchSuggest">
<Form action = "deal. php" method = "get" id = "suggest_form">
<Input type = "text" name = "keywords" id = "suggest_input" autocomplete = "off"/>
<Input type = "submit" value = "search" id = "suggest_submit"/>
</Form>
<Ul id = "suggest_ul">
</Ul>
</Div>
 
</Body>
</Html>


Getdata. Php file

The code is as follows: Copy code

<? Php
 
Header ("Content-type: text/html; charset = gb2312 ");
// Database configuration information (username, password, database name, table prefix, etc)
$ Pai_dbhost = "localhost ";
$ Pai_dbuser = "root ";
$ Pai_dbpwd = "dddddd ";
$ Pai_dbname = "ajaxdemo1 ";
$ Pai_dbprefix = "";

$ Link = mysql_connect ($ pai_dbhost, $ pai_dbuser, $ pai_dbpwd );
Mysql_select_db ($ pai_dbname );
Mysql_query ("set names gbk ");
// Prevent garbled characters
$ Keywords = iconv ("UTF-8", "gb2312 // IGNORE", $ _ POST ['keyword']);
// Match the title related to the entered keyword and rank by clicks.
$ SQL = "select title from". $ pai_dbprefix. "article where title like '%". $ keywords. "% 'Order by click desc limit ;";
// 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 "[{'keyword': '". iconv_substr ($ row ['title'], 0, 14, "gbk"). "'}]";
} Else {
$ Result = "[{'keyword': '". iconv_substr ($ row ['title'], 0, 14, "gbk ")."'}";
While ($ row = mysql_fetch_array ($ res )){
$ Result. = ", {'keyword': '". iconv_substr ($ row ['title'], 0, 14, "gbk ")."'}";
  }
$ Result. = ']';
Echo $ result;
 }
Mysql_free_result ($ res );

?>

These are the core code, followed by the complete instance download address

Let's take a look at the effect first (go below and download ^_^ from the source code)

The effect after entering a "p"


Each input character is matched once.

 

The effect is like this. If you think it is okay, you can download the following source code for fun.


I have added only 10 pieces of data to the data table. If necessary, you can add them by yourself.

 

Full instance download address: Source code download

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

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.