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

Source: Internet
Author: User

When using Baidu and google, we will find that there will be related prompts as long as we enter one word, which improves the website experience, next, I will share with you an example of an automatic prompt box in the drop-down menu of Baidu Google search using php + mysql + ajax.


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

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.

 

Whole instance: Download source code

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.