这个程序是利用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. LeetCode: Best Time to Buy and Sell Stock III [123]

    [称号] Say you have an array for which the ith element is the price of a given stock on day i. Design ...

  2. Ubuntu12.10 下搭建基于KVM-QEMU的虚拟机环境（十三）

    今天我们实验libvirt提供的快照功能,快照可以用于系统恢复,防止安装了某些软件或中病毒等情况导致系统损毁的情况. 一.快照类型 1)        磁盘快照 内部的:快照驻留在原来的镜像文件内部 ...

  3. Java 里把 InputStream 转换成 String 的几种方法

    我们在 Java 中经常会碰到如何把 InputStream 转换成 String 的情形,比如从文件或网络得到一个 InputStream,需要转换成字符串输出或赋给别的变量. 未真正关注这个问题之 ...

  4. 快捷找jar包方式

    通过例如以下站点查找jar包: 1.http://www.java2s.com/Code/Jar/o/Downloadorgapacheservicemixbundlescommonslang246j ...

  5. 使用CSS3制图

    参考资料:http://blog.csdn.net/fense_520/article/details/37892507 本文非转载.为个人原创,转载请先联系博主,谢谢~ 准备: <!DOCTY ...

  6. Visual Studio跨平台开发实战(1) - Hello Xamarin!

    原文 Visual Studio跨平台开发实战(1) - Hello Xamarin! 前言 应用程式发展的脚步, 从来没有停过. 从早期的Windows 应用程式, 到网路时代的web 应用程式, ...

  7. MyEclipse中“擅自乱改”项目名导致项目报错的处理

    最近几天培训的过程中,经常有同学手一抖,默默的修改了本来配置部署好的项目名,导致项目报错…… 遇到这种事情,我一般会做的处理就是重新新建项目,然后把包和各种文件ctrl+c ctrl+v,遇到项目小还 ...

  8. eclipse 重构(转)

    Eclipse中的重构类型        如果你看一下Eclipse的重构菜单,可以看到四部分.第一部分是撤销和重做.其他的三部分包含Eclipse提供的三种类型的重构. 第一种类型的重构改变代码的物 ...

  9. Applet 数字签名技术完全攻略

      这里说声对不起大家.毕竟2几年前,我想写这篇文章,但因为他才懒得一直没有写.同时也给自己的东西好.前些日子我老大让我又搞这个东西发现我曾经的资料没留,又凭着自己印象从新来过.但发现网上写的东西真的 ...

  10. Yii 控制dropdownlist / select 控件的宽度和 option 的宽度

    默认情况下, option的宽度会由options中最宽的元素决定,并且同时决定着select控件的宽度 在Yii中,如果需要自定义select控件的宽度,可以用 htmlOptions定义,如下: ...