|
锁定老帖子 主题：jquery 智能提示,支持json
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2012-02-15
最后修改：2012-02-17
在网上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');
感觉不太爽，因为大多数情况下，我们会要动态获得这些数据，所以我对它进行了一下改造。。先上图
<!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方法。 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2012-02-17
最后修改：2012-02-17
flex要是有这样的东西好了 怎么没人做一个发网上呢。。。
|
| 返回顶楼 | |
|
发表时间：2012-02-17
在总数据量不大的情况下，直接写在文件里面的交互速度要快很多，用户体验也会好很多。
|
| 返回顶楼 | |
|
发表时间：2012-02-17
cllhy 写道 在总数据量不大的情况下，直接写在文件里面的交互速度要快很多，用户体验也会好很多。
对于城市信息来说也去是这样，但是实际业务中很多时候，这个数据是要交互的，是动态。。。。 |
| 返回顶楼 | |
|
发表时间：2012-02-17
看到楼主这篇文章的标题，我觉得是不是有点不知所云
|
| 返回顶楼 | |
|
发表时间：2012-02-17
edisonlv2010 写道 看到楼主这篇文章的标题，我觉得是不是有点不知所云
基于您的疑惑，我改了标题 |
| 返回顶楼 | |
|
发表时间：2012-02-17
你确信你这帖子应该发到“Java企业应用”版块？
|
| 返回顶楼 | |
|
发表时间：2012-02-17
jQuery早就有这个插件了阿！
jquery autocomplete 以前做过一个： http://pirateyk.iteye.com/admin/blogs/789802 |
| 返回顶楼 | |
|
发表时间：2012-02-17
或许可以参考各种coude complete？
|
| 返回顶楼 | |
|
发表时间：2012-02-17
auto complete
网上一搜一大把 |
| 返回顶楼 | |
