jquery 改造了(仿机票预定智能输入城市),支持json
来源:互联网 发布:淘宝对好评返现的处罚 编辑:程序博客网 时间:2024/05/01 11:38
在网上http://www.cnblogs.com/kyle_zhao/archive/2010/02/27/1674819.html,看到这样一篇文章,
JQuery实现智能输入提示(仿机票预订网站),下载后看了一下,它把查询的城市信息放在了aircity.js文件里。
//初始化常用机场城市var commoncitys=new Array();commoncitys[0]=new Array('SZX','深圳','SHENZHEN','SZ'); commoncitys[1]=new Array('PEK','北京','BEIJING','BJ'); commoncitys[2]=new Array('SHA','上海','SHANGHAI','SH'); commoncitys[3]=new Array('CAN','广州','GUANGZHOU','GZ');//初始化所有国内机场城市var citys=new Array();// A citys[0]=new Array('SHA','上海','SHANGHAI','SH'); citys[1]=new Array('HYN','黄岩','HUANGYAN','HY'); citys[2]=new Array('HGH','杭州','HANGZHOU','HZ'); citys[3]=new Array('YIW','义乌','YIWU','YW'); citys[4]=new Array('JUZ','衢州','JUZHOU','QZ'); citys[5]=new Array('HSN','舟山(普陀山)','ZHOUSHAN','ZS'); citys[6]=new Array('WNZ','温州','WENZHOU','WZ'); citys[7]=new Array('NGB','宁波','NINGBO','NB'); citys[8]=new Array('LNJ','临沧','LINCANG','LC'); citys[9]=new Array('ZAT','昭通','ZHAOTONG','ZT'); citys[10]=new Array('SYM','思茅','SIMAO','SM'); citys[11]=new Array('LUM','芒市','MANSHI','MS'); citys[12]=new Array('BSD','保山','BAOSHAN','BS'); citys[13]=new Array('KMG','昆明','KUNMING','KM'); citys[14]=new Array('JHG','西双版纳','XISHUANGBANNA','XSBN'); citys[15]=new Array('DLU','大理','DALI','DL'); citys[16]=new Array('DIG','迪庆','DIQING','DQ'); citys[17]=new Array('LJG','丽江','LIJIANG','LJ'); citys[18]=new Array('LXA','拉萨','LASA','LS'); citys[19]=new Array('TCG','塔城','TACHENG','TC'); citys[20]=new Array('IQM','且末','QIEMO','QM'); citys[21]=new Array('KCA','库车','KUCHE','KC'); citys[22]=new Array('HTN','和田','HETAN','HT'); citys[23]=new Array('HMI','哈密','HAMI','HM'); citys[24]=new Array('FYN','富蕴','FUYUN','FY'); citys[25]=new Array('AKU','阿克苏','AGESU','AKS'); citys[26]=new Array('URC','乌鲁木齐','WULUMUQI','WLMQ'); citys[27]=new Array('KHG','喀什','KASHI','KS'); citys[28]=new Array('KRL','库尔勒','KUERLE','KEL'); citys[29]=new Array('KRY','克拉玛依','KELAMAYI','KLMY'); citys[30]=new Array('AAT','阿勒泰','ALETAI','ALT'); citys[31]=new Array('YIN','伊宁','YINING','YN'); citys[32]=new Array('TSN','天津','TIANJIN','TJ'); citys[33]=new Array('AKA','安康','ANKANG','AK'); citys[34]=new Array('ENY','延安','YANAN','YA'); citys[35]=new Array('HZG','汉中','HANZHONG','HZ'); citys[36]=new Array('XIY','西安','XIAN','XA'); citys[37]=new Array('UYN','榆林','YULIN','YL'); citys[38]=new Array('CIH','长治','CHANGZHI','CZ'); citys[39]=new Array('TYN','太原','TAIYUAN','TY'); citys[40]=new Array('DAT','大同','DATONG','DT'); citys[41]=new Array('YCU','运城','YUNCHENG','YC'); citys[42]=new Array('TNA','济南','JINAN','JN'); citys[43]=new Array('YNT','烟台','YANTAI','YT'); citys[44]=new Array('JNG','济宁','JINING','JL'); citys[45]=new Array('DOY','东营','DONGYING','DY');<IMG alt="" src="http://dl.iteye.com/upload/attachment/0063/2329/051a6ab9-c696-358d-92b6-57bc5535576e.bmp">
感觉不太爽,因为大多数情况下,我们会要动态获得这些数据,所以我对它进行了一下改造。。先上图
这是修改后的html文件:
<!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>智能输入提示</title><link rel="stylesheet" type="text/css" href="js/jquery.suggest.css"><script type="text/javascript" src="js/jquery-1.4.2.min.js"></script><script type="text/javascript" src="js/j.dimensions.js"></script><script type="text/javascript" src="js/aircity.js"></script><script type="text/javascript" src="js/j.suggest.js"></script><script type="text/javascript">$(function() {$.ajax({type : "post",url : "<SPAN style="COLOR: #ff0000">1.json</SPAN>",timeout : 20000,error : function() {alert('服务器错误');},async : false,dataType : "json",success : function(data) {var str = "";var str1 = "";$("#arrcity").suggest(<SPAN style="COLOR: #ff0000">data</SPAN>, {hot_list : <SPAN style="COLOR: #ff0000">data</SPAN>,dataContainer : '#arrcity_3word', attachObject : '#suggest'});}});});</script></head><div id="box"><h1>仿机票预定智能输入提示DEMO</h1><input type="hidden" name="arrcity_3word" id="arrcity_3word" value="" /><label for="arrcity">出发城市:</label><input type="text" name="arrcity"id="arrcity" /><div id='suggest' class="ac_results"></div> </div></html>
先是用ajax请求从后台获取json字符串,然后传入到页面。由于是例子,json很简单。
{ "content1":[ "", "刘德华", "LDH", "liudehua" ], "content2":[ "", "李宇春", "lyc", "LYC" ], "content3":[ "", "张卫健", "zwj","ZWJ" ] }
主要修改了j.suggest.js的displayItems方法。
test.rar下载 http://dl.iteye.com/topics/download/9da921e9-33d5-39e5-9171-97c4d261ae8f
- jquery 改造了(仿机票预定智能输入城市),支持json
- 机票预定常用词汇
- 机票预定系统
- 机票预定系统可行性分析
- jQuery输入城市查看地图
- jQuery插件(智能感知输入内容)
- 学会买机票 (太有用了)
- jQuery城市选择器(仿51选择)
- jQuery城市选择器(仿51选择)
- 使用jquery 实现 仿google 的智能提示输入框功能
- 使用jquery 实现 仿google 的智能提示输入框功能 (改进版本)
- jQuery插件支持AMD的写法改造
- vs2008支持Jquery智能提示
- JQUERY仿百度谷歌智能提示
- jquery实现仿火车官网城市选择切换案例
- bootstrap仿百度输入框智能提示(提示信息存在于数据库中)
- 仿BookingNow 预定效果
- struts2+spring+hibernate+json+jquery+flexigrid开发笔记-flexigrid改造
- iphone内存管理
- Drupal7模組介紹-Views-part6(display與overrides使用)
- 算术表达式求值的算符优先算法
- 手把手教你玩转网络编程模型之完成例程(Completion Routine)篇(上)
- 手把手教你玩转网络编程模型之完成例程(Completion Routine)篇(下) .
- jquery 改造了(仿机票预定智能输入城市),支持json
- 完成端口(CompletionPort)详解 - 手把手教你玩转网络编程系列之三 .
- Spring中@Autowired注解、@Resource注解的区别
- 简单工厂(可配置的工厂类)和工厂方法模式以及抽象工厂
- 指向指针的指针 和 指针的引用
- ref和out的异同
- C和C++应用随机数
- 级ee
- nefu494深海机器人问题