【技巧】带搜索的城市下拉
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>带搜索的城市下拉菜单</title>
<style type="text/css">
body{font-family:Arial, Helvetica, sans-serif,"宋体";font-size:12px;text-align:center;}
#box{width:600px;text-align:left;margin:0 auto;padding-top:80px;}
#suggest{width:200px;}
.gray{color:gray;}
.ac_results {background:#fff;border:1px solid #7f9db9;position:absolute;z-index:10000;display:none;}
.ac_results ul{margin:0;padding:0;list-style:none;}
.ac_results li a{white-space:nowrap;text-decoration:none;display:block;color:#05a;padding:1px 3px;}
.ac_results li{border:1px solid #fff;}
.ac_over,.ac_results li a:hover {background:#c8e3fc;}
.ac_results li a span{float:right;}
.ac_result_tip{border-bottom:1px dashed #666;padding:3px;}
</style>
</head>
<body>
<div id="box">
<input type="text" name="arrcity" id="arrcity" />
<div id='suggest' class="ac_results"></div>
</div>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/aircity.js"></script>
<script type="text/javascript">
$(function(){
$("#arrcity").suggest(citys,{
hot_list:commoncitys,dataContainer:'#arrcity_3word',attachObject:'#suggest',
});
});
</script>
</body>
</html>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');
commoncitys[4]=new Array('CTU','成都','CHENGDU','CD');
commoncitys[5]=new Array('HGH','杭州','HANGZHOU','HZ');
commoncitys[6]=new Array('CSX','长沙','CHANGSHA','CS');
commoncitys[7]=new Array('CKG','重庆','CHONGQING','CQ');
commoncitys[8]=new Array('KMG','昆明','KUNMING','KM');
commoncitys[9]=new Array('XIY','西安','XIAN','XA');
commoncitys[10]=new Array('WUH','武汉','WUHAN','WH');
commoncitys[11]=new Array('NKG','南京','NANJING','NJ');
commoncitys[12]=new Array('TAO','青岛','QINGDAO','QD');
commoncitys[13]=new Array('SYX','三亚','SANYA','SY');
commoncitys[14]=new Array('XMN','厦门','XIAMEN','XM');
//初始化所有国内城市
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');
citys[46]=new Array('LYI','临沂','LINYI','LY');
citys[47]=new Array('WEF','潍坊','WEIFANG','WF');
citys[48]=new Array('TAO','青岛','QINGDAO','QD');
citys[49]=new Array('WEH','威海','WEIHAI','WH');
citys[50]=new Array('GHN','广汉','GUANGHAN','GH');
citys[51]=new Array('DAX','达县','DAXIAN','DX');
citys[52]=new Array('CTU','成都','CHENGDU','CD');
citys[53]=new Array('MIG','绵阳','MIANYANG','MY');
citys[54]=new Array('YBP','宜宾','YIBIN','YB');
citys[55]=new Array('LZO','泸州','LUZHOU','LZ');
citys[56]=new Array('XIC','西昌','XICHANG','XC');
citys[57]=new Array('NAO','南充','NANCHONG','NC');
citys[58]=new Array('PZI','攀枝花','PANZHIHUA','PZH');
citys[59]=new Array('GOQ','格尔木','GELANMU','GEM');
citys[60]=new Array('XNN','西宁','XINING','XN');
citys[61]=new Array('ZHY','中卫','ZHONGWEI','null');
citys[62]=new Array('INC','银川','YINCHUAN','YC');
citys[63]=new Array('XIL','锡林浩特','XILINHAOTE','XLHT');
citys[64]=new Array('HLH','乌兰浩特','WULANHAOTE','WLHT');
citys[65]=new Array('WUA','乌海','WUHAI','WH');
citys[66]=new Array('TGO','通辽','TONGLIAO','TL');
citys[67]=new Array('HET','呼和浩特','HUHEHAOTE','HHHT');
citys[68]=new Array('DSN','鄂尔多斯','EERDUOSI','EEDS');
citys[69]=new Array('NZH','满洲里','MANZHOULI','MZL');
citys[70]=new Array('HLD','海拉尔','HAILAER','HLE');
citys[71]=new Array('CIF','赤峰','CHIFENG','CF');
citys[72]=new Array('BAV','包头','BAOTOU','BT');
citys[73]=new Array('CHG','朝阳','CHAOYANG','CY');
citys[74]=new Array('SHE','沈阳','SHENYANG','SY');
citys[75]=new Array('DLC','大连','DALIAN','DL');
citys[76]=new Array('DDG','丹东','DANDONG','DD');
citys[77]=new Array('JNZ','锦州','JINZHOU','JZ');
citys[78]=new Array('AOG','鞍山','ANSHAN','AS');
citys[79]=new Array('KHN','南昌','NANCHANG','NC');
citys[80]=new Array('JDZ','景德镇','JINDEZHEN','JDZ');
citys[81]=new Array('JIU','九江','JIUJIANG','JJ');
citys[82]=new Array('KOW','赣州','GANZHOU','GZ');
citys[83]=new Array('JGS','井冈山','JINGGANGSHAN','JGS');
citys[84]=new Array('KNC','吉安','JIAN','JA');
citys[85]=new Array('LYG','连云港','LIANYUNGANG','LYG');
citys[86]=new Array('SZV','苏州','SUZHOU','SZ');
citys[87]=new Array('YNZ','盐城','YANCHENG','YC');
citys[88]=new Array('XUZ','徐州','XUZHOU','XZ');
citys[89]=new Array('NKG','南京','NANJING','NJ');
citys[90]=new Array('NTG','南通','NANTONG','NT');
citys[91]=new Array('CZX','常州','CHANGZHOU','CZ');
citys[92]=new Array('WUX','无锡','WUXI','WX');
citys[93]=new Array('TNH','通化','TONGHUA','TH');
citys[94]=new Array('JIL','吉林','JILIN','JL');
citys[95]=new Array('CGQ','长春','CHANGCHUN','CC');
citys[96]=new Array('YNJ','延吉','YANJI','YJ');
citys[97]=new Array('HJJ','芷江','ZHIJIANG','ZJ');
citys[98]=new Array('DYG','张家界','ZHANGJIAJIE','ZJJ');
citys[99]=new Array('CGD','常德','CHANGDE','CD');
citys[100]=new Array('CSX','长沙','CHANGSHA','CS');
citys[101]=new Array('HNY','衡阳','HENGYANG','HY');
citys[102]=new Array('OHE','漠河','MOHE','MH');
citys[103]=new Array('HRB','哈尔滨','HAERBIN','HRB');
citys[104]=new Array('HEK','黑河','HEIHE','HH');
citys[105]=new Array('NDG','齐齐哈尔','QIQIHAER','QQHE');
citys[106]=new Array('JMU','佳木斯','JIAMUSI','JMS');
citys[107]=new Array('MDG','牡丹江','MUDANJIANG','MDJ');
citys[108]=new Array('LYA','洛阳','LUOYANG','LY');
citys[109]=new Array('NNY','南阳','NANYANG','NY');
citys[110]=new Array('CGO','郑州','ZHENGZHOU','ZZ');
citys[111]=new Array('SJW','石家庄','SHIJIAZHUANG','SJZ');
citys[112]=new Array('SHP','秦皇岛','QINHUANGDAO','QHD');
citys[113]=new Array('HDN','邯郸','HANDAN','HD');
citys[114]=new Array('SHS','沙市','SHASHI','SS');
citys[115]=new Array('WUH','武汉','WUHAN','WH');
citys[116]=new Array('XFN','襄樊','XIANGFAN','XF');
citys[117]=new Array('ENH','恩施','ENSHI','ES');
citys[118]=new Array('YIH','宜昌','YICHANG','YC');
citys[119]=new Array('HAK','海口','HAIKOU','HK');
citys[120]=new Array('SYX','三亚','SANYA','SY');
citys[121]=new Array('XYI','兴义','XINGYI','XY');
citys[122]=new Array('KWE','贵阳','GUIYANG','GY');
citys[123]=new Array('TEN','铜仁','TONGREN','TR');
citys[124]=new Array('ZYI','遵义','ZUNYI','ZY');
citys[125]=new Array('BHY','北海','BEIHAI','BH');
citys[126]=new Array('KWL','桂林','GUILIN','GL');
citys[127]=new Array('LZH','柳州','LIUZHOU','LZ');
citys[128]=new Array('NNG','南宁','NANNING','NN');
citys[129]=new Array('BAS','百色','BAISE','BS');
citys[130]=new Array('WUZ','梧州','WUZHOU','WZ');
citys[131]=new Array('THQ','天水','TIANSHUI','null');
citys[132]=new Array('IQN','庆阳','QINGYANG','QY');
citys[133]=new Array('CHW','酒泉','JIUQUAN','JQ');
citys[134]=new Array('JGN','嘉峪关','JIAYUGUAN','JYG');
citys[135]=new Array('DNH','敦煌','DUNHUANG','DH');
citys[136]=new Array('LHW','兰州','LANZHOU','LZ');
citys[137]=new Array('ZHA','湛江','ZHANJIANG','ZJ');
citys[138]=new Array('MXZ','梅州','MEIZHOU','MZ');
citys[139]=new Array('ZUH','珠海','ZHUHAI','ZH');
citys[140]=new Array('SWA','汕头','SHANTOU','ST');
citys[141]=new Array('SZX','深圳','SHENZHEN','SZ');
citys[142]=new Array('CAN','广州','GUANGZHOU','GZ');
citys[143]=new Array('XMN','厦门','XIAMEN','XM');
citys[144]=new Array('WUS','武夷山','WUYISHAN','WYS');
citys[145]=new Array('QHU','泉州','QUANZHOU','QZ');
citys[146]=new Array('LIC','连城','LIANCHENG','LC');
citys[147]=new Array('JJN','晋江','JINJIANG','JJ');
citys[148]=new Array('FOC','福州','FUZHOU','FZ');
citys[149]=new Array('WXN','万县','WANXIAN','WX');
citys[150]=new Array('CKG','重庆','CHONGQING','CQ');
citys[151]=new Array('TXN','黄山','HUANGSHAN','HS');
citys[152]=new Array('BFU','蚌埠','BENGBU','BB');
citys[153]=new Array('FUG','阜阳','FUYANG','FY');
citys[154]=new Array('HFE','合肥','HEFEI','HF');
citys[155]=new Array('AQG','安庆','ANQING','AQ');
citys[156]=new Array('PEK','北京','BEIJING','BJ');
//
(function($) {
$.suggest = function(input, options) {
var $input = $(input).attr("autocomplete", "off");
var $results;
var timeout = false; // hold timeout ID for suggestion results to appear
var prevLength = 0; // last recorded length of $input.val()
var cache = []; // cache MRU list
var cacheSize = 0; // size of cache in chars (bytes?)
if($.trim($input.val())=='' || $.trim($input.val())=='中文/拼音') $input.val('中文/拼音').css('color','#aaa');
if( ! options.attachObject )
options.attachObject = $(document.createElement("ul")).appendTo('body');
$results = $(options.attachObject);
$results.addClass(options.resultsClass);
resetPosition();
$(window)
.load(resetPosition) // just in case user is changing size of page while loading
.resize(resetPosition);
$input.blur(function() {
setTimeout(function() { $results.hide() }, 200);
});
$input.focus(function(){
if($.trim($(this).val())=='中文/拼音'){
$(this).val('').css('color','#000');
}
if($.trim($(this).val())==''){
displayItems('');//显示热门城市列表
}
});
$input.click(function(){
var q=$.trim($(this).val());
displayItems(q);
$(this).select();
});
// help IE users if possible
try {
$results.bgiframe();
} catch(e) { }
$input.keyup(processKey);//
function resetPosition() {
// requires jquery.dimension plugin
var offset = $input.offset();
$results.css({
top: (offset.top + input.offsetHeight) + 'px',
left: offset.left + 'px'
});
}
function processKey(e) {
// handling up/down/escape requires results to be visible
// handling enter/tab requires that AND a result to be selected
if ((/27$|38$|40$/.test(e.keyCode) && $results.is(':visible')) ||
(/^13$|^9$/.test(e.keyCode) && getCurrentResult())) {
if (e.preventDefault)
e.preventDefault();
if (e.stopPropagation)
e.stopPropagation();
e.cancelBubble = true;
e.returnValue = false;
switch(e.keyCode) {
case 38: // up
prevResult();
break;
case 40: // down
nextResult();
break;
case 13: // return
selectCurrentResult();
break;
case 27: // escape
$results.hide();
break;
}
} else if ($input.val().length != prevLength) {
if (timeout)
clearTimeout(timeout);
timeout = setTimeout(suggest, options.delay);
prevLength = $input.val().length;
}
}
function suggest() {
var q = $.trim($input.val());
displayItems(q);
}
function displayItems(items) {
var html = '';
if (items=='') {//热门城市遍历
for(h in options.hot_list){
html+='<li rel="'+options.hot_list[h][0]+'"><a href="#'+h+'"><span>'+options.hot_list[h][2]+'</span>'+options.hot_list[h][1]+'</a></li>';
}
html='<div class="gray ac_result_tip">请输入中文/拼音或者↑↓选择</div><ul>'+html+'</ul>';
}
else {
/*if (!items)
return;
if (!items.length) {
$results.hide();
return;
}*/
for (var i = 0; i < options.source.length; i++) {//国内城市匹配
var reg = new RegExp('^' + items + '.*$', 'im');
if (reg.test(options.source[i][0]) || reg.test(options.source[i][1]) || reg.test(options.source[i][2]) || reg.test(options.source[i][3])) {
html += '<li rel="' + options.source[i][0] + '"><a href="#' + i + '"><span>' + options.source[i][2] + '</span>' + options.source[i][1] + '</a></li>';
}
}
if (html == '') {
suggest_tip = '<div class="gray ac_result_tip">对不起，找不到：' + items + '</div>';
}
else {
suggest_tip = '<div class="gray ac_result_tip">' + items + '，按拼音排序</div>';
}
html = suggest_tip + '<ul>' + html + '</ul>';
}
$results.html(html).show();
$results.children('ul').children('li:first-child').addClass(options.selectClass);
$results.children('ul')
.children('li')
.mouseover(function() {
$results.children('ul').children('li').removeClass(options.selectClass);
$(this).addClass(options.selectClass);
})
.click(function(e) {
e.preventDefault();
e.stopPropagation();
selectCurrentResult();
});
}
function getCurrentResult() {
if (!$results.is(':visible'))
return false;
var $currentResult = $results.children('ul').children('li.' + options.selectClass);
if (!$currentResult.length)
$currentResult = false;
return $currentResult;
}
function selectCurrentResult() {
$currentResult = getCurrentResult();
if ($currentResult) {
$input.val($currentResult.children('a').html().replace(/<span>.+?<\/span>/i,''));
$results.hide();
if( $(options.dataContainer) ) {
$(options.dataContainer).val($currentResult.attr('rel'));
}
if (options.onSelect) {
options.onSelect.apply($input[0]);
}
}
}
function nextResult() {
$currentResult = getCurrentResult();
if ($currentResult)
$currentResult
.removeClass(options.selectClass)
.next()
.addClass(options.selectClass);
else
$results.children('ul').children('li:first-child').addClass(options.selectClass);
}
function prevResult() {
$currentResult = getCurrentResult();
if ($currentResult)
$currentResult
.removeClass(options.selectClass)
.prev()
.addClass(options.selectClass);
else
$results.children('ul').children('li:last-child').addClass(options.selectClass);
}
}
$.fn.suggest = function(source, options) {
if (!source)
return;
options = options || {};
options.source = source;
options.hot_list=options.hot_list || [];
options.delay = options.delay || 0;
options.resultsClass = options.resultsClass || 'ac_results';
options.selectClass = options.selectClass || 'ac_over';
options.matchClass = options.matchClass || 'ac_match';
options.minchars = options.minchars || 1;
options.delimiter = options.delimiter || '\n';
options.onSelect = options.onSelect || false;
options.dataDelimiter = options.dataDelimiter || '\t';
options.dataContainer = options.dataContainer || '#SuggestResult';
options.attachObject = options.attachObject || null;
this.each(function() {
new $.suggest(this, options);
});
return this;
};
})(jQuery);
3420
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
