jquery 改造了（仿机票预定智能输入城市），支持json

qq123zhz

浏览: 534339 次
性别:
来自: 深圳

最近访客更多访客>>

xinqingchaguan

chenleiwoaini

背靠背拥抱

Ruding

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

java
jquery ajax

在网上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');

感觉不太爽，因为大多数情况下，我们会要动态获得这些数据，所以我对它进行了一下改造。。先上图

这是修改后的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 : "1.json",
				timeout : 20000,
				error : function() {
					alert('服务器错误');
				},
				async : false,
				dataType : "json",
				success : function(data) {
					var str = "";
					var str1 = "";
				
			
			$("#arrcity").suggest(data, {
				hot_list : data,
				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 (52 KB)
下载次数: 518

查看图片附件

分享到：

frameset 跳转 | table td为空，没有边框

2012-02-15 14:33
浏览 2039
评论(0)
论坛回复 / 浏览 (16 / 10176)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery 改造了（仿机票预定智能输入城市），支持json

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery 改造了（仿机票预定智能输入城市），支持json

评论

发表评论

相关推荐

eclipse Resource 资料

.docker/machine/machines/default/ca.pem: no such file or directory

list.AddAll 去重复

eclipse 插件开发 Setting the Java build path

xstream 下划线_问题

RCP MessageConsole设置显示的最大行数

针对jquery ajax post到后台的乱码解决

freemarker 自定义freeMarker标签

IE6、IE7下Radio按钮选不中

jquery IE7下foucs无效的处理

xstream javabean设置属性默认值的问题

在使用xstream反序列化时遇到的问题

RCP 知识点

RCP FileSystem 文件系统

json转为Map

eclipse4.x 去掉quick access

xstream 的高级用法，自定义输出结构

js 调用js

jdt 核心知识

jdt 创建java工程，生成代码，运行main方法

最近访客更多访客>>