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.如何找到一个网 ...

随机推荐

SQLServer批量备份与还原
原文地址:http://www.cnblogs.com/fygh/archive/2011/09/09/2172546.html 备份与还原是数据库避不开的主题,而作为DBA,经常会面临将一台机器上的 ...
重构ConditionHelper
在上一篇日志写了ConditionHelper的具体实现方法和它的用法,但那时只是把心里所想的一个思路用代码记录下来,而没有经过实践检验的,难免存在一些问题,但在最近的一个新项目中用到Conditi ...
IntelliJ IDEA Groovy（转）
更新环境变量: source /etc/profile 验证是否成功: # groovy -version Groovy Version: 2.3.6 JVM: 1.7.0_67 Vendor: Or ...
Git双机同步
如果使用git init 初始化,当客户端仓库push内容时,服务器端仓库可以看到log,但是更新的文件不能显示,必须使用git reset --hard才能更新内容
_tkinter.TclError: no display name and no $DISPLAY environment variable
_tkinter.TclError: no display name and no $DISPLAY environment variable 这是在使用cocos2d-x的pluginx时遇到的一个 ...
Codeforces Round #256 (Div. 2) D. Multiplication Table（二进制搜索）
转载请注明出处:viewmode=contents" target="_blank">http://blog.csdn.net/u012860063?viewmod ...
Effective C++规定45 额外的代码
这部分是额外的代码博客,关键45术语思想已经实现. #include<iostream> using namespace std; template<typename T> c ...
Android学习笔记（四十）：Preference使用
Preference从字面上看偏好,译为首选项. 一些配置数据,一些我们上次点击选择的内容.我们希望在下次应用调起的时候依旧有效,无须用户再一次进行配置或选择.Android提供preference这 ...
【设计优化】-使用缓冲（Buffer）提高程序性能
缓冲区是一块特定的内存区域.开辟缓冲区的目的是通过缓解应用程序上下层之间的性能差异,提高系统性能. 缓冲能够协调上层组件和下层组件的性能差异.当上层组件性能因为下层组件时,能够有效地降低上层组件对下层 ...
java中途强制跳出递归
有些时候我们需要在中途强制跳出递归,而且还是需要一步跳出,而不一层一层的跳出,这时,我们可以采用抛异常的方法来实现. class Test { static class StopMsgExceptio ...

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

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

随机推荐

热门专题