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.如何找到一个网 ...
随机推荐
- pig中使用的一些实例语法
在pig中, dump和store会分别完毕两个MR, 不会一起进行 1:载入名用正則表達式: LOAD '/user/wizad/data/wizad/raw/2014-0{6,7-0,7-1,7- ...
- windows之实现3D立体效果的三种方法
第一种:快捷键:win+tab 另外一种:cmd输入rundll32.exe dwmapi #105 第三种:使用软件bumptop
- Lua 与C 交换 第一篇
编译 windows上编译lua源代码 cl /MD /O2 /W3 /c /DLUA_BUILD_AS_DLL *.c del *.o ren lua.obj lua.o ren luac.obj ...
- Android如何获得手机power_profile.xml文件
上的能量消耗进行最近的测试,阅读文章一个月,最后,我们发现了一些新的想法,但产生的问题.那 工作无法再进行下去. 在Android手机中,对于手机中的每一个部件(cpu.led.gps.3g等等)执行 ...
- Android 大约Dialog弹出窗口
直接效果图: 实现步骤: 1.主界面activity_main.xml非常easy,一个button <RelativeLayout xmlns:android="http://sch ...
- Oracle改变字段类型
由于需求变化.现在,我们要一个类型NUMBER(8,2)字段类型改变 char. 总体思路如以下: 将要更改类型的字段名改名以备份,然后加入一个与要更改类型的字段名同名的字段(原字段已经改 ...
- Add/Remove listview web part in publish site via powershell
1. Here is the code: Add WebPart in Publish Site Example : AddWebPartPublish http://localhost " ...
- 【iOS】彩虹渐变色 的 Swift 实现
首先很感谢大家的支持与关注.<Web Color 的 Swfit 实现>一文一经公布.訪问量迅速攀升,让本人受宠若惊. 为表达感激之情,今天早上把彩虹渐变也顺手实现了. 最新代码& ...
- 【原创】leetCodeOj --- Fraction to Recurring Decimal 解题报告
原题地址: https://oj.leetcode.com/problems/fraction-to-recurring-decimal/ 题目内容: Given two integers repre ...
- JAVA学习课第二十八届(多线程(七))- 停止-threaded多-threaded面试题
主密钥 /* * wait 和 sleep 差别? * 1.wait能够指定时间也能够不指定 * sleep必须指定时间 * 2.在同步中,对CPU的运行权和锁的处理不同 * wait释放运 ...