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

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 百度搜索框智能提示效果的更多相关文章

js中实现输入框类似百度搜索的智能提示效果
说明:我这里显示的数据采用词典(词典在js中自定义的,看下面文字),主要显示key. 页面元素: <style type="text/css">.search { le ...
ajax实现异步前后台交互，模拟百度搜索框智能提示
1.什么是异步?在传统的网站项目中,填写一堆数据,最后点击提交,在点击提交的这一刻才实现数据提交,前后台交互.在你点击提交之前数据是没有提交到后台的.这样就会造成很大的不便.比如,我填了一大堆数据,结 ...
使用jsonp跨域调用百度js实现搜索框智能提示，并实现鼠标和键盘对弹出框里候选词的操作【附源码】
项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好的选择.使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript ...
使用jsonp跨域调用百度js实现搜索框智能提示（转）
http://www.cnblogs.com/oppoic/p/baidu_auto_complete.html 项目中常常用到搜索,特别是导航类的网站.自己做关键字搜索不太现实,直接调用百度的是最好 ...
Servlet+Ajax实现搜索框智能提示
简介:搜索框相信大家都不陌生,几乎每天都会在各类网站进行着搜索.有没有注意到,很多的搜索功能,当输入内容时,下面会出现提示.这类提示就叫做搜索框的智能提示,本门课程就为大家介绍如何使用Servlet和 ...
Ternary Search Tree 应用--搜索框智能提示
前面介绍了Ternary Search Tree和它的实现,那么可以用Ternary Search Tree来实现搜索框的只能提示,因为Ternary Search Tree的前缀匹配效率是非常高的, ...
Ajax跨域实现淘宝/百度搜索下拉提示效果
最近学到Ajax,觉得自己对与前后端的数据交互有了一个基本的了解.下面是Ajax应用到淘宝/百度的搜索功能的一个简单的小实例,就是输入一个词,下拉框中自动显示匹配的内容:
用jQuery实现搜索框的过滤效果
遇到的问题: 1.动态添加了某些元素,在动态添加的某个元素上绑定事件失效原因:因为需要绑定的元素的直接父元素也是动态添加的解决:向上为上一级父元素绑定事件 $(".check-box&qu ...
Ajax跨域：Jsonp实例--百度搜索框下拉提示
Ajax跨域:Jsonp实例--百度搜索框下拉提示一.总结一句话总结:a.找好接口:b.用script标签的src引入文件(json数据):c.定义及实现上一步引入文件中的函数 1.如何找到一个网 ...

随机推荐

HTML5 CSS3专题纯CSS打造相冊效果
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这种一个样例.感觉效果还不错,不记得啥时候 ...
Swift编程语言学习10—— 枚举属性监视器
属性监视器属性监视器监控和响应属性值的变化,每次属性被设置值的时候都会调用属性监视器.甚至新的值和如今的值同样的时候也不例外. 能够为除了延迟存储属性之外的其它存储属性加入属性监视器,也能够通过重载 ...
核心ASP.NET
1.用于Web应用程序的.NET Framework ASP.NET是.NET Framework的一部分,它可以在通过HTTP请求文档是在WEB服务器上动态创建它们,在.Net Framework中 ...
Linux------创建和终止进程
创建进程: Linux创建两个步骤的新处理:fork()和exec().其中fork创建当前进程的能力(父进程)副本,那个孩子.父子进程只有PID不同.在这之后,该系统具有两个进程,运行相同的操作.父 ...
zend studio代码字体修改字体和大小.
第一步:进入设置窗口 windows -> preferences 第二步:进入修改字体的选项卡. General -> Appearance -> Colors and ...
SSH协议详解（转）
转发的http://blog.csdn.net/macrossdzh/article/details/5691924 很透彻啊,学习了一.什么是SSH SSH是英文Secure Shell的简写形式 ...
9patch(.9)怎么去掉自己画上的黑点/黑线
在自己制作.9.png图片的时候,制作之后所制作的图片上面会显示出制作的痕迹,也即是图片区域上会显示小黑点和黑线.那么为了真正的利用.9.png图片的使用效果.这些瑕疵当然是不能出现的了.因此,要想办 ...
Kinect的学习笔记发展（一）Kinect引进和应用
Kinect的学习笔记发展(一)Kinect引进和应用 zouxy09@qq.com http://blog.csdn.net/zouxy09 一.Kinect简单介绍 Kinectfor Xbox ...
（七）unity4.6Ugui中国教程文档-------摘要-UGUI Auto Layout
大家好,我是太阳广东. 转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:http://www.unityman ...
libyuv编
下载代码(墙): git clone http://git.chromium.org/external/libyuv.git 用 make 编译(linux.mingw.cygwin): mak ...

jquery php 百度搜索框智能提示效果

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

随机推荐

热门专题