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
