Php+ajax do imitation Baidu search Drop-down automatic prompt box (with instance) _php instance

Source: Internet
Author: User
Tags phpmyadmin
Php+mysql+ajax implementation of Baidu search Drop-down prompt box is mainly 3 files three files in the same directory as the following figure

Here are three files of code to import SQL files into the MySQL database to modify the database password for their own remember oh Yes UTF-8 code

Php+mysql+ajax realize Baidu search Drop-down prompt box
Effect chart

rpc.php file
Copy Code code as follows:

<?php
mysql_connect (' localhost ', ' root ', ');
mysql_select_db ("test");
$queryString = $_post[' querystring '];
if (strlen ($queryString) >0) {
$sql = "Select value from countries WHERE value like '". $queryString. " % ' LIMIT 10 ';
$query = mysql_query ($sql);
while ($result = Mysql_fetch_array ($query, Mysql_both)) {
$value = $result [' value '];
Echo ' <li onclick= ', fill (\ '. $value. \');" > '. $value. ' </li> ';
}
}
?>

index.htm file
Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>ajax Auto suggest</title>
<script type= "Text/javascript" src= "Http://www.iiwnet.com/templets/niu/js/jquery.min.js" ></script>
<script type= "Text/javascript" >
function Lookup (inputstring) {
if (Inputstring.length = = 0) {
Hide the suggestion box.
$ (' #suggestions '). Hide ();
} else {
$.post ("rpc.php", {querystring: "" +inputstring+ "}, function (data) {
if (Data.length >0) {
$ (' #suggestions '). Show ();
$ (' #autoSuggestionsList '). HTML (data);
}
});
}
}//Lookup
function Fill (thisvalue) {
$ (' #inputString '). Val (Thisvalue);
SetTimeout ("$ (' #suggestions '). Hide ();", 200);
}
</script>
<style type= "Text/css" >
Body {
Font-family:helvetica;
font-size:11px;
Color: #000;
}
h3 {
margin:0px;
padding:0px;
}
. suggestionsbox {
position:relative;
left:30px;
margin:10px 0px 0px 0px;
width:200px;
Background-color: #212427;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border:2px solid #000;
Color: #fff;
}
. suggestionlist {
margin:0px;
padding:0px;
}
. suggestionlist Li {
margin:0px 0px 3px 0px;
padding:3px;
Cursor:pointer;
}
. suggestionlist Li:hover {
Background-color: #659CD8;
}
</style>
<body>
<div>
<form>
<div>
Type your county:
<br/>
<input type= "text" size= "value=" "id=" inputstring "onkeyup=" lookup (this.value); "onblur=" Fill (); "/>
</div>
<div class= "Suggestionsbox" id= "suggestions" style= "Display:none"; >

<div class= "suggestionlist" id= "Autosuggestionslist" >

</div>
</div>
</form>
</div>
</body>

SQL database Autocomplete.sql files (import to MySQL)
Copy Code code as follows:

--phpMyAdmin SQL Dump
--Version 3.3.5
--Http://www.phpmyadmin.net
--
--Host: localhost
--Date Created: December 09, 2010 02:36
--Server version: 5.0.22
--PHP version: 5.2.14
SET sql_mode= "No_auto_value_on_zero";
--
--Database: ' Test '
--
-- --------------------------------------------------------
--
--The structure of the table ' countries '
--
CREATE TABLE IF not EXISTS ' countries ' (
' ID ' int (6) not NULL auto_increment,
' Value ' varchar not NULL default ',
PRIMARY KEY (' id ')
) Engine=myisam DEFAULT charset=latin1 auto_increment=243;
--
--the data in the dump table ' countries '
--
INSERT into ' countries ' (' id ', ' value ') VALUES
(1, ' Afghanistan '),
(2, ' Aringland Islands '),
(3, ' Albania '),
(4, ' Algeria '),
(5, ' American Samoa '),
(6, ' Andorra '),
(7, ' Angola '),
(8, ' Anguilla '),
(9, ' Antarctica '),
(' Antigua and Barbuda '),
(One, ' Argentina '),
(The ' Armenia '),
(' Aruba '),
(The ' Australia '),
(The ' Austria '),
(The ' Azerbaijan '),
(The ' Bahamas '),
(The ' Bahrain '),
(The ' Bangladesh '),
(The ' Barbados '),
(The ' Belarus '),
(' Belgium '),
(' Belize '),
(' Benin '),
(The ' Bermuda '),
(' Bhutan '),
(The ' Bolivia '),
(Bosnia and Herzegovina '),
(' Botswana '),
(The ' Bouvet Island '),
(The ' Brazil '),
("British Indian Ocean Territory"),
(The ' Brunei Darussalam '),
(The ' Bulgaria '),
(' Burkina Faso '),
(The ' Burundi '),
(Panax Notoginseng, ' Cambodia '),
(The ' Cameroon '),
(The ' Canada '),
(The ' Cape Verde '),
(The ' Cayman Islands '),
(The ' African Republic '),
(The ' Chad '),
(The ' Chile '),
("the"),
(The ' Christmas Island '),
("Cocos (Keeling) Islands"),
(The ' Colombia '),
(The ' Comoros '),
(The ' Congo '),
(Wuyi, ' Congo '),
("Democratic Republic"),
(' Cook Islands '),
(The ' Costa Rica '),
("Ivory Coast (Ivory Coast)"),
("Croatia (Hrvatska)"),
(The ' Cuba '),
(Cyprus, ' "),
("Czech Republic"),
(The ' Denmark '),
(The ' Djibouti '),
(The ' Dominica '),
(The ' Dominican Republic '),
(The ' East Timor '),
("Ecuador"),
(The ' Egypt '),
(The ' El Salvador '),
(Guinea, ' equatorial "),
(The ' Eritrea '),
(The ' Estonia '),
(The ' Ethiopia '),
(Islands, ' Falkland '),
(Faroe, ' Islands '),
(The "Fiji"),
(The ' Finland '),
(The ' France '),
(French Guiana '),
(French, ' Polynesia '),
(Southern, ' French territories '),
(The ' Gabon '),
(Bayi, ' Gambia '),
(the "Georgia"),
(The ' Germany '),
(The ' Ghana '),
(The ' Gibraltar '),
(The ' Greece '),
(The ' Greenland '),
(The ' Grenada '),
(MR, ' Guadeloupe '),
(The ' Guam '),
(the "Guatemala"),
(MR, ' Guinea '),
(MR, ' Guinea-Bissau '),
(The ' Guyana '),
(The ' Haiti '),
("Heard and McDonald Islands '),
(The ' Honduras '),
(The ' Kong '),
(The ' Hungary '),
(M, ' Iceland '),
(' India '),
(102, ' Indonesia '),
(The ' Iran '),
(The ' Iraq '),
(The ' Ireland '),
(the "Israel"),
(The ' Italy '),
(108, ' Jamaica '),
(109, ' Japan '),
(The ' Jordan '),
(MR, ' Kazakhstan '),
(112, ' Kenya '),
(113, ' Kiribati '),
(114, ' Korea (North) '),
(Korea, ' South '),
(116, ' Kuwait '),
(117, ' Kyrgyzstan '),
(118, ' Lao people ' s Democratic Republic '),
(119, ' Latvia '),
(The ' Lebanon '),
(121, ' Lesotho '),
(122, ' Liberia '),
(123, ' Libyan Arab Jamahiriya '),
(124, ' Liechtenstein '),
(The ' Lithuania '),
(126, ' Luxembourg '),
(127, ' Macao '),
(128, ' Macedonia '),
(129, ' Madagascar '),
(130, ' Malawi '),
(131, ' Malaysia '),
(132, ' Maldives '),
(the "Mali"),
(134, ' Malta '),
(135, ' Marshall Islands '),
(136, ' Martinique '),
(137, ' Mauritania '),
(138, ' Mauritius '),
(139, ' Mayotte '),
(140, ' Mexico '),
(the "Micronesia"),
("Moldova"),
(143, ' Monaco '),
(144, ' Mongolia '),
(145, ' Montserrat '),
(146, ' Morocco '),
(147, ' Mozambique '),
(148, ' Myanmar '),
(149, ' Namibia '),
(The ' Nauru '),
(151, ' Nepal '),
(152, ' Netherlands '),
(153, ' Netherlands Antilles '),
(154, ' New Caledonia '),
(Zealand, ' New '),
(156, ' Nicaragua '),
(157, ' Niger '),
(158, ' Nigeria '),
(159, ' Niue '),
(160, ' Norfolk Island '),
(161, ' Northern Mariana Islands '),
(162, ' Norway '),
(163, ' Oman '),
(164, ' Pakistan '),
(165, ' Palau '),
(166, ' Palestinian territories '),
(167, ' Panama '),
(Guinea, ' Papua New "),
(169, ' Paraguay '),
(170, ' Peru '),
(171, ' Philippines '),
(172, ' Pitcairn '),
(173, ' Poland '),
(174, ' Portugal '),
(175, ' Puerto Rico '),
(176, ' Qatar '),
(177, ' runion '),
(178, ' Romania '),
(179, ' Russian Federation '),
(180, ' Rwanda '),
(181, ' Saint Helena '),
(Kitts, ' Saint and Nevis '),
(183, ' Saint Lucia '),
(184, ' Saint Pierre and Miquelon '),
(185, ' Saint Vincent and the Grenadines '),
(186, ' Samoa '),
(187, ' San Marino '),
(188, ' Sao Tome and Principe '),
(189, ' Saudi Arabia '),
(190, ' Senegal '),
(191, ' Serbia and Montenegro '),
(the "Seychelles"),
(193, ' Sierra Leone '),
(194, ' Singapore '),
(195, ' Slovakia '),
(196, ' Slovenia '),
(197, ' Solomon Islands '),
(198, ' Somalia '),
(199, ' South Africa '),
(' South Georgia and the South Sandwich Islands '),
(201, ' Spain '),
(the "Sri Lanka"),
(203, ' Sudan '),
(204, ' Suriname '),
(205, ' Svalbard and Mayen Islands '),
(206, ' Swaziland '),
(207, ' Sweden '),
(The ' Switzerland '),
(209, ' Syria '),
(210, ' Taiwan '),
(211, ' Tajikistan '),
(212, ' Tanzania '),
(213, ' Thailand '),
(214, ' Togo '),
(215, ' Tokelau '),
(216, ' Tonga '),
(217, ' Trinidad and Tobago '),
(218, ' Tunisia '),
(219, ' Turkey '),
(The ' Turkmenistan '),
(221, ' Turks and Caicos Islands '),
(222, ' Tuvalu '),
(223, ' Uganda '),
(224, ' Ukraine '),
(the "United Arab Emirates"),
(United, ' Kingdom '),
(States, ' United of America '),
(228, ' Uruguay '),
(229, ' Uzbekistan '),
(230, ' Vanuatu '),
(231, ' Vatican City '),
(232, ' Venezuela '),
(233, ' Vietnam '),
(234, ' Virgin Islands (British) '),
(235, ' Virgin Islands (US) '),
(236, ' Wallis and Futuna Islands '),
(237, ' Western Sahara '),
(238, ' Yemen '),
(239, ' Zaire '),
(The ' Zambia '),
(241, ' Zimbabwe ');

You must be very strong on the local server test and the principle is simple and not so troublesome.

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.