jquery php百度搜索框智能提示效果
这个程序是利用php+ajax+jquery 实现的一个仿baidu智能提示的效果,有需要的朋友可以下载测试,代码如下:
index.html文件,保保存成index.htm,代码如下:
- <!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=utf-8" />
- <title>Ajax Auto Suggest</title>
-
- <script type="text/javascript" src="jquery-1.2.1.pack.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>
-
- </head>
-
- <body>
-
-
- <div>
- <form>
- <div>
- Type your county:
- <br />
- <input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
- </div>
-
- <div class="suggestionsBox" id="suggestions" style="display: none;">
- <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
- <div class="suggestionList" id="autoSuggestionsList">
-
- </div>
- </div>
- </form>
- </div>
-
- </body>
- </html>
php文件,代码如下:
- <?php
-
- mysql_connect('localhost', 'root' ,'root');
- mysql_select_db("autoComplete");
-
- $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>';
- }
-
- }
-
- ?>
sql.sql把这里复制保存到你的数据库,代码如下:
-
-
-
-
-
-
-
-
-
- SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
-
-
- /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
- /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
- /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
- /*!40101 SET NAMES utf8 */;
-
-
-
-
-
-
-
-
-
-
-
- CREATE TABLE IF NOT EXISTS `countries` (
- `id` int(6) NOT NULL auto_increment,
- `value` varchar(250) NOT NULL default '',
- PRIMARY KEY (`id`)
- ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=243 ;
-
-
-
-
-
- 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'),
- (10, 'Antigua and Barbuda'),
- (11, 'Argentina'),
- (12, 'Armenia'),
- (13, 'Aruba'),
- (14, 'Australia'),
- (15, 'Austria'),
- (16, 'Azerbaijan'),
- (17, 'Bahamas'),
- (18, 'Bahrain'),
- (19, 'Bangladesh'),
- (20, 'Barbados'),
- (21, 'Belarus'),
- (22, 'Belgium'),
- (23, 'Belize'),
- (24, 'Benin'),
- (25, 'Bermuda'),
- (26, 'Bhutan'),
- (27, 'Bolivia'),
- (28, 'Bosnia and Herzegovina'),
- (29, 'Botswana'),
- (30, 'Bouvet Island'),
- (31, 'Brazil'),
- (32, 'British Indian Ocean territory'),
- (33, 'Brunei Darussalam'),
- (34, 'Bulgaria'),
- (35, 'Burkina Faso'),
- (36, 'Burundi'),
- (37, 'Cambodia'),
- (38, 'Cameroon'),
- (39, 'Canada'),
- (40, 'Cape Verde'),
- (41, 'Cayman Islands'),
- (42, 'Central African Republic'),
- (43, 'Chad'),
- (44, 'Chile'),
- (45, 'China'),
- (46, 'Christmas Island'),
- (47, 'Cocos (Keeling) Islands'),
- (48, 'Colombia'),
- (49, 'Comoros'),
- (50, 'Congo'),
- (51, 'Congo'),
- (52, ' Democratic Republic'),
- (53, 'Cook Islands'),
- (54, 'Costa Rica'),
- (55, 'Ivory Coast (Ivory Coast)'),
- (56, 'Croatia (Hrvatska)'),
- (57, 'Cuba'),
- (58, 'Cyprus'),
- (59, 'Czech Republic'),
- (60, 'Denmark'),
- (61, 'Djibouti'),
- (62, 'Dominica'),
- (63, 'Dominican Republic'),
- (64, 'East Timor'),
- (65, 'Ecuador'),
- (66, 'Egypt'),
- (67, 'El Salvador'),
- (68, 'Equatorial Guinea'),
- (69, 'Eritrea'),
- (70, 'Estonia'),
- (71, 'Ethiopia'),
- (72, 'Falkland Islands'),
- (73, 'Faroe Islands'),
- (74, 'Fiji'),
- (75, 'Finland'),
- (76, 'France'),
- (77, 'French Guiana'),
- (78, 'French Polynesia'),
- (79, 'French Southern Territories'),
- (80, 'Gabon'),
- (81, 'Gambia'),
- (82, 'Georgia'),
- (83, 'Germany'),
- (84, 'Ghana'),
- (85, 'Gibraltar'),
- (86, 'Greece'),
- (87, 'Greenland'),
- (88, 'Grenada'),
- (89, 'Guadeloupe'),
- (90, 'Guam'),
- (91, 'Guatemala'),
- (92, 'Guinea'),
- (93, 'Guinea-Bissau'),
- (94, 'Guyana'),
- (95, 'Haiti'),
- (96, 'Heard and McDonald Islands'),
- (97, 'Honduras'),
- (98, 'Hong Kong'),
- (99, 'Hungary'),
- (100, 'Iceland'),
- (101, 'India'),
- (102, 'Indonesia'),
- (103, 'Iran'),
- (104, 'Iraq'),
- (105, 'Ireland'),
- (106, 'Israel'),
- (107, 'Italy'),
- (108, 'Jamaica'),
- (109, 'Japan'),
- (110, 'Jordan'),
- (111, 'Kazakhstan'),
- (112, 'Kenya'),
- (113, 'Kiribati'),
- (114, 'Korea (north)'),
- (115, 'Korea (south)'),
- (116, 'Kuwait'),
- (117, 'Kyrgyzstan'),
- (118, 'Lao People''s Democratic Republic'),
- (119, 'Latvia'),
- (120, 'Lebanon'),
- (121, 'Lesotho'),
- (122, 'Liberia'),
- (123, 'Libyan Arab Jamahiriya'),
- (124, 'Liechtenstein'),
- (125, 'Lithuania'),
- (126, 'Luxembourg'),
- (127, 'Macao'),
- (128, 'Macedonia'),
- (129, 'Madagascar'),
- (130, 'Malawi'),
- (131, 'Malaysia'),
- (132, 'Maldives'),
- (133, 'Mali'),
- (134, 'Malta'),
- (135, 'Marshall Islands'),
- (136, 'Martinique'),
- (137, 'Mauritania'),
- (138, 'Mauritius'),
- (139, 'Mayotte'),
- (140, 'Mexico'),
- (141, 'Micronesia'),
- (142, 'Moldova'),
- (143, 'Monaco'),
- (144, 'Mongolia'),
- (145, 'Montserrat'),
- (146, 'Morocco'),
- (147, 'Mozambique'),
- (148, 'Myanmar'),
- (149, 'Namibia'),
- (150, 'Nauru'),
- (151, 'Nepal'),
- (152, 'Netherlands'),
- (153, 'Netherlands Antilles'),
- (154, 'New Caledonia'),
- (155, 'New Zealand'),
- (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'),
- (168, 'Papua New Guinea'),
- (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'),
- (182, 'Saint Kitts 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'),
- (192, 'Seychelles'),
- (193, 'Sierra Leone'),
- (194, 'Singapore'),
- (195, 'Slovakia'),
- (196, 'Slovenia'),
- (197, 'Solomon Islands'),
- (198, 'Somalia'),
- (199, 'South Africa'),
- (200, 'South Georgia and the South Sandwich Islands'),
- (201, 'Spain'),
- (202, 'Sri Lanka'),
- (203, 'Sudan'),
- (204, 'Suriname'),
- (205, 'Svalbard and Jan Mayen Islands'),
- (206, 'Swaziland'),
- (207, 'Sweden'),
- (208, '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'),
- (220, 'Turkmenistan'),
- (221, 'Turks and Caicos Islands'),
- (222, 'Tuvalu'),
- (223, 'Uganda'),
- (224, 'Ukraine'),
- (225, 'United Arab Emirates'),
- (226, 'United Kingdom'),
- (227, 'United States 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'),
- (240, 'Zambia'),
- (241, 'Zimbabwe');
注:里面有个jquery文件没有放上来,大家可以下载jquery库.
|