首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 PHP

php+ajax做仿百度搜索下拉自动提示框(有实例)

Posted in PHP onAugust 21, 2012

php+mysql+ajax实现百度搜索下拉提示框 主要有3个文件三个文件在同一个目录里 如下图
php+ajax做仿百度搜索下拉自动提示框(有实例)
下面是三个文件的代码 把sql文件导入到mysql数据库里 修改下数据库密码为自己的 记得哦是UTF-8编码

php+mysql+ajax实现百度搜索下拉提示框
效果图
php+ajax做仿百度搜索下拉自动提示框(有实例)
rpc.php文件 

<?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文件 
<!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="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> 
</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>

sql数据库autoComplete.sql文件（导入到mysql） 
-- phpMyAdmin SQL Dump 
-- version 3.3.5 
-- http://www.phpmyadmin.net 
-- 
-- 主机: localhost 
-- 生成日期: 2010 年 12 月 09 日 02:36 
-- 服务器版本: 5.0.22 
-- PHP 版本: 5.2.14 
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO"; 
-- 
-- 数据库: `test` 
-- 
-- -------------------------------------------------------- 
-- 
-- 表的结构 `countries` 
-- 
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 ; 
-- 
-- 转存表中的数据 `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'), 
(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');

你在本地服务器测试下 一定很给力 而且原理很简单 没那么麻烦

php+ajax做仿百度搜索下拉自动提示框(有实例)

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

PHP 相关文章推荐
php flush类输出缓冲剖析
Oct 19 PHP
在字符串指定位置插入一段字符串的php代码
Feb 16 PHP
DW中链接mysql数据库时，建立字符集中文出现乱码的解决方法
Mar 27 PHP
PHP中的strtr函数使用介绍(str_replace)
Oct 20 PHP
php遍历数组的方法分享
Mar 22 PHP
php ckeditor上传图片文件名乱码解决方法
Nov 15 PHP
PHP根据IP判断地区名信息的示例代码
Mar 03 PHP
yii的CURD操作实例详解
Dec 04 PHP
PHP asXML()函数讲解
Feb 03 PHP
在PHP中输出JS语句以及乱码问题的解决方案
Feb 13 PHP
mongodb和php的用法详解
Mar 25 PHP
php实现通过stomp协议连接ActiveMQ操作示例
Feb 23 PHP
php计算十二星座的函数代码
Aug 21 #PHP
表格展示无限级分类(PHP版)
Aug 21 #PHP
gd库图片下载类实现下载网页所有图片的php代码
Aug 20 #PHP
自己在做项目过程中学到的PHP知识收集
Aug 20 #PHP
用PHP+MySQL搭建聊天室功能实例代码
Aug 20 #PHP
PHP系列学习之日期函数使用介绍
Aug 18 #PHP
PHP中extract()函数的定义和用法
Aug 17 #PHP
cypress(1) 变量提升(1) 缓冲区(1) ant design(2) pdf(1) form表单(1) json_extract(1) JOIN(1) NoSQL(1) 弹窗(1)
You might like
php smarty 二级分类代码和模版循环例子
2011/06/01 PHP
PHP header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
php stripslashes和addslashes的区别
2014/02/03 PHP
php匹配字符中链接地址的方法
2014/12/22 PHP
php实现将wav文件转换成图像文件并在页面中显示的方法
2015/04/21 PHP
PHP使用反射机制实现查找类和方法的所在位置
2016/04/22 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
JS控制网页动态生成任意行列数表格的方法
2015/03/09 Javascript
js淡入淡出的图片轮播效果代码分享
2015/08/24 Javascript
js一维数组、多维数组和对象的混合使用方法
2016/04/03 Javascript
Vue键盘事件用法总结
2017/04/18 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
2017/04/22 Javascript
微信小程序中使用javascript 回调函数
2017/05/11 Javascript
js实现一个简单的MVVM框架示例
2018/01/15 Javascript
vue 表单输入格式化中文输入法异常问题
2018/05/30 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
2018/08/19 Javascript
小程序实现左右来回滚动字幕效果
2018/12/28 Javascript
详解webpack编译速度提升之DllPlugin
2019/02/05 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
[03:49]DOTA2 2015国际邀请赛中国区预选赛第二日现场百态
2015/05/27 DOTA
200行python代码实现2048游戏
2019/07/17 Python
python脚本执行CMD命令并返回结果的例子
2019/08/14 Python
Python-jenkins模块获取jobs的执行状态操作
2020/05/12 Python
浅谈tensorflow使用张量时的一些注意点tf.concat,tf.reshape,tf.stack
2020/06/23 Python
新英格兰最大的特色礼品连锁店：The Paper Store
2018/07/23 全球购物
美赞臣营养马来西亚旗舰店：Enfagrow马来西亚
2019/07/26 全球购物
德国网上超市：myTime.de
2019/08/26 全球购物
如何为DataGridView添加一个定制的Column Type
2014/01/21 面试题
政法大学毕业生自荐信范文
2014/01/01 职场文书
有关九一八事变的演讲稿
2014/09/14 职场文书
开会迟到检讨书范文
2015/05/06 职场文书
2015年物业公司保洁工作总结
2015/10/22 职场文书
css display table 自适应高度、宽度问题的解决
2021/05/07 HTML / CSS