这个程序是利用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

header('content-type:text/html;charset=utf-8');

mysql_connect('localhost', 'root' ,'');

mysql_select_db("test");

mysql_query("set names utf8");

$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'];

	 ?>

	 <li onClick="fill('<?=$value?>')"><?

=$value?></li>

	 <?php

	}

}

?>

sql.sql把这里复制保存到你的数据库教程

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=utf8 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');

版权声明：本文博主原创文章，博客，未经同意不得转载。

jquery php 百度搜索框智能提示效果的更多相关文章

  1. js中实现输入框类似百度搜索的智能提示效果

    说明:我这里显示的数据采用词典(词典在js中自定义的,看下面文字),主要显示key. 页面元素: <style type="text/css">.search { le ...

  2. ajax实现异步前后台交互，模拟百度搜索框智能提示

    1.什么是异步?在传统的网站项目中,填写一堆数据,最后点击提交,在点击提交的这一刻才实现数据提交,前后台交互.在你点击提交之前数据是没有提交到后台的.这样就会造成很大的不便.比如,我填了一大堆数据,结 ...

  3. 使用jsonp跨域调用百度js实现搜索框智能提示，并实现鼠标和键盘对弹出框里候选词的操作【附源码】

    项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择.使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript ...

  4. 使用jsonp跨域调用百度js实现搜索框智能提示（转）

    http://www.cnblogs.com/oppoic/p/baidu_auto_complete.html 项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好 ...

  5. Servlet+Ajax实现搜索框智能提示

    简介:搜索框相信大家都不陌生,几乎每天都会在各类网站进行着搜索.有没有注意到,很多的搜索功能,当输入内容时,下面会出现提示.这类提示就叫做搜索框的智能提示,本门课程就为大家介绍如何使用Servlet和 ...

  6. Ternary Search Tree 应用--搜索框智能提示

    前面介绍了Ternary Search Tree和它的实现,那么可以用Ternary Search Tree来实现搜索框的只能提示,因为Ternary Search Tree的前缀匹配效率是非常高的, ...

  7. Ajax跨域实现淘宝/百度搜索下拉提示效果

    最近学到Ajax,觉得自己对与前后端的数据交互有了一个基本的了解.下面是Ajax应用到淘宝/百度的搜索功能的一个简单的小实例,就是输入一个词,下拉框中自动显示匹配的内容:

  8. 用jQuery实现搜索框的过滤效果

    遇到的问题: 1.动态添加了某些元素,在动态添加的某个元素上绑定事件失效 原因:因为需要绑定的元素的直接父元素也是动态添加的解决:向上为上一级父元素绑定事件 $(".check-box&qu ...

  9. Ajax跨域：Jsonp实例--百度搜索框下拉提示

    Ajax跨域:Jsonp实例--百度搜索框下拉提示 一.总结 一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...

随机推荐

  1. FragmentCustomAnimation实现Fragment的界面切换

    1.知识点:FragmentCustomAnimation 2.演示样例:来自于官网演示样例的简化,这样更方便于学习该知识点. 本演示样例的源代码下载地址为:http://download.csdn. ...

  2. C#之网络

    首先很不好意思,前段时间把评论的功能给关掉啦,BUT NOW 此功能以开放,欢迎小伙伴们拍砖. 1网络 在网络环境下,我们最感兴趣的两个名称空间是System.Net和System.Net.Socke ...

  3. ConcurrentHashMap中的2的n次方幂上舍入方法（转）

    最近看JDK中的concurrentHashMap类的源码,其中有那么一个函数: /** * Returns a power of two table size for the given desir ...

  4. hdu 4454 Stealing a Cake（三分法）

    给定一个起始点,一个矩形,一个圆,三者互不相交.求从起始点->圆->矩形的最短距离. 自己画一画就知道距离和会是凹函数,不过不是一个凹函数.按与水平向量夹角为圆心角求圆上某点坐标,[0, ...

  5. Instruments的使用 逻辑查错，内存泄漏分析等工具集

    原创文章,转载请注明 XCode 开发后期,要对代码进行改进和优化,查内存泄漏是其中一项重要工作,今天下午偷了点时间,把前段时间的代码稍微整理了一下,顺带用了下这个工具,还真发现了些问题.这里记录一下 ...

  6. vi 按了ctrl+s之后

    再windows不管是写程序.还是用Word写文件.已经习惯了按ctrl+s 保存代码. 在用vi的时候.常常无意中按了ctrl+s,结果就是如同终端死掉了一样. 这是由于ctrl+s 终止屏幕输出( ...

  7. Cracking the coding interview--问题与解答

    http://www.hawstein.com/posts/ctci-solutions-contents.html 作者:Hawstein出处:http://hawstein.com/posts/c ...

  8. 你真的了解try{ return }finally{}中的return？(转)

    今天去逛论坛 时发现了一个很有趣的问题: 谁能给我我解释一下这段程序的结果为什么是:2.而不是:3 代码如下: class Test { public int aaa() { int x = 1; t ...

  9. UVA 10142 Australian Voting（模拟）

    题意:澳大利亚投票系统要求选民们将全部候选人按愿意选择的程度排序,一张选票就是一个排序.一開始,每张选票的首选项将被统计.若有候选人得票超过50%,他讲直接胜出:否则,全部并列最低的候选人出局,而那些 ...

  10. 黄聪：Microsoft Enterprise Library 5.0 系列教程(五) Data Access Application Block

    原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(五) Data Access Application Block 企业库数据库访问模块通过抽象工厂模式,允许用户 ...