自动完成下拉提示框(ajax)
|
<!
DOCTYPE
HTML
PUBLIC
"-//W 3C //DTD HTML 4.01 Transitional//EN"
>
<
html
>
<
head
>
<
title
>
下拉提示菜单
</
title
>
<
meta
http-equiv
=
"content-type"
content
=
"text/html; charset=gbk"
>
<
script
language
=
"javascript"
>
var
cityData =[[
'
鞍山
'
,
'anshan'
,
'AS'
],
[
'
安庆
'
,
'anqing'
,
'AQ'
],
[
'
安阳
'
,
'anyang'
,
'AY'
],
[
'
安康
'
,
'ankang'
,
'AK'
],
[
'
阿克苏
'
,
'akesu'
,
'AKS'
],
[
'
阿勒泰
'
,
'aletai'
,
'ALT'
],
[
'
安顺
'
,
'anshun'
,
'AS'
],
[
'
北京首都
'
,
'beijingshoudu'
,
'BJSD'
],
[
'
北京南苑
'
,
'beijingnanyuan'
,
'BJNY'
],
[
'
蚌埠
'
,
'bengbu'
,
'BB'
],
[
'
北海
'
,
'beihai'
,
'BH'
],
[
'
保山
'
,
'baoshan'
,
'BS'
],
[
'
包头
'
,
'baotou'
,
'BT'
],
[
'
成都
'
,
'chengdu'
,
'CD'
],
[
'
重庆
'
,
'chongqing'
,
'CQ'
],
[
'
长沙
'
,
'changsha'
,
'CS'
],
[
'
长春
'
,
'changchun'
,
'CC'
],
[
'
常州
'
,
'changzhou'
,
'CZ'
],
[
'
常德
'
,
'changde'
,
'CD'
],
[
'
承德
'
,
'chengde'
,
'CD'
],
[
'
朝阳
'
,
'chaoyang'
,
'CY'
],
[
'
长治
'
,
'changzhi'
,
'CZ'
],
[
'
赤峰
'
,
'chifeng'
,
'CF'
],
[
'
昌都
'
,
'changdu'
,
'CD'
],
[
'
长海
'
,
'changhai'
,
'CH'
],
[
'
大连
'
,
'dalian'
,
'DL'
],
[
'
大理
'
,
'dali'
,
'DL'
],
[
'
东营
'
,
'dongying'
,
'DY'
],
[
'
敦煌
'
,
'dunhuang'
,
'DH'
],
[
'
丹东
'
,
'dandong'
,
'DD'
],
[
'
大同
'
,
'datong'
,
'DT'
],
[
'
达县
'
,
'daxian'
,
'DX'
],
[
'
迪庆
'
,
'diqing'
,
'DQ'
],
[
'
恩施
'
,
'enshi'
,
'ES'
],
[
'
福州
'
,
'fuzhou'
,
'FZ'
],
[
'
佛山
'
,
'foshan'
,
'FS'
],
[
'
阜阳
'
,
'fuyang'
,
'FY'
],
[
'
富蕴
'
,
'fuyun'
,
'FY'
],
[
'
广州
'
,
'guangzhou'
,
'GZ'
],
[
'
桂林
'
,
'guilin'
,
'GL'
],
[
'
贵阳
'
,
'guiyang'
,
'GY'
],
[
'
赣州
'
,
'ganzhou'
,
'GZ'
],
[
'
格尔木
'
,
'geermu'
,
'GEM'
],
[
'
广元
'
,
'guangyuan'
,
'GY'
],
[
'
广汉
'
,
'guanghan'
,
'GH'
],
[
'
杭州
'
,
'hangzhou'
,
'HZ'
],
[
'
哈尔滨
'
,
'haerbin'
,
'HEB'
],
[
'
合肥
'
,
'hefei'
,
'HF'
],
[
'
海口
'
,
'haikou'
,
'HK'
],
[
'
呼和浩特
'
,
'huhehaote'
,
'HHHT'
],
[
'
黄山
'
,
'huangshan'
,
'HS'
],
[
'
衡阳
'
,
'hengyang'
,
'HY'
],
[
'
黑河
'
,
'heihe'
,
'HH'
],
[
'
海拉尔
'
,
'hailaer'
,
'HLE'
],
[
'
哈密
'
,
'hami'
,
'HM'
],
[
'
黄岩
'
,
'huangyan'
,
'HY'
],
[
'
汉中
'
,
'hanzhong'
,
'HZ'
],
[
'
徽州
'
,
'huizhou'
,
'HZ'
],
[
'
和田
'
,
'hetian'
,
'HT'
],
[
'
济南
'
,
'jinan'
,
'JN'
],
[
'
吉林
'
,
'jilin'
,
'JL'
],
[
'
九寨沟
'
,
'jiuzhaigou'
,
'JZG'
],
[
'
景德镇
'
,
'jingdezhen'
,
'JDZ'
],
[
'
井冈山
'
,
'jinggangshan'
,
'JGS'
],
[
'
锦州
'
,
'jinzhou'
,
'JZ'
],
[
'
晋江
'
,
'jinjiang'
,
'JJ'
],
[
'
九江
'
,
'jiujiang'
,
'JJ'
],
[
'
济宁
'
,
'jining'
,
'JN'
],
[
'
荆州
'
,
'jingzhou'
,
'JZ'
],
[
'
景洪
'
,
'jinghong'
,
'JH'
],
[
'
吉安
'
,
'jian'
,
'JA'
],
[
'
嘉峪关
'
,
'jiayuguan'
,
'JYG'
],
[
'
佳木斯
'
,
'jiamusi'
,
'JMS'
],
[
'
酒泉
'
,
'jiuquan'
,
'JQ'
],
[
'
昆明
'
,
'kunming'
,
'KM'
],
[
'
昆山
'
,
'kunshan'
,
'KS'
],
[
'
喀什
'
,
'kashi'
,
'KS'
],
[
'
库车
'
,
'kuche'
,
'KC'
],
[
'
库尔勒
'
,
'kuerle'
,
'KEL'
],
[
'
克拉玛依
'
,
'kelamayi'
,
'KLMY'
],
[
'
兰州
'
,
'lanzhou'
,
'LZ'
],
[
'
拉萨
'
,
'lasa'
,
'LS'
],
[
'
丽江
'
,
'lijiang'
,
'LJ'
],
[
'
庐山
'
,
'lushan'
,
'LS'
],
[
'
泸州
'
,
'luzhou'
,
'LZ'
],
[
'
柳州
'
,
'liuzhou'
,
'LZ'
],
[
'
连云港
'
,
'lianyungang'
,
'LYG'
],
[
'
洛阳
'
,
'luoyang'
,
'LY'
],
[
'
龙岩
'
,
'longyan'
,
'LY'
],
[
'
连城
'
,
'liancheng'
,
'LC'
],
[
'
临沂
'
,
'linyi'
,
'LY'
],
[
'
临沧
'
,
'lincang'
,
'LC'
],
[
'
林芝
'
,
'linzhi'
,
'LZ'
],
[
'
罗定
'
,
'luoding'
,
'LD'
],
[
'
梁平
'
,
'Liangping'
,
'LP'
],
[
'
林西
'
,
'linxi'
,
'LX'
],
[
'
牡丹江
'
,
'mudanjiang'
,
'MDJ'
],
[
'
绵阳
'
,
'mianyang'
,
'MY'
],
[
'
梅县
'
,
'meixian'
,
'MX'
],
[
'
满洲里
'
,
'manzhouli'
,
'MZL'
],
[
'
芒市
'
,
'mangshi'
,
'MS'
],
[
'
南京
'
,
'nanjing'
,
'NJ'
],
[
'
南昌
'
,
'nanchang'
,
'NC'
],
[
'
宁波
'
,
'ningbo'
,
'NB'
],
[
'
南宁
'
,
'nanning'
,
'NN'
],
[
'
南通
'
,
'nantong'
,
'NT'
],
[
'
南阳
'
,
'nanyang'
,
'NY'
],
[
'
南充
'
,
'nanchong'
,
'NC'
],
[
'
南平
'
,
'nanping'
,
'NP'
],
[
'
攀枝花
'
,
'panzhihua'
,
'PZH'
],
[
'
普洱
'
,
'puer'
,
'PE'
],
[
'
青岛
'
,
'qingdao'
,
'QD'
],
[
'
秦皇岛
'
,
'qinhuangdao'
,
'QHD'
],
[
'
泉州
'
,
'quanzhou'
,
'QZ'
],
[
'
齐齐哈尔
'
,
'qiqihaer'
,
'QQHE'
],
[
'
衢州
'
,
'quzhou'
,
'QZ'
],
[
'
且末
'
,
'qiemo'
,
'QM'
],
[
'
庆阳
'
,
'qingyang'
,
'QY'
],
[
'
上海虹桥
'
,
'shanghaihongqiao'
,
'SHHQ'
],
[
'
上海浦东
'
,
'shanghaipudong'
,
'SHPD'
],
[
'
深圳
'
,
'shenzhen'
,
'SZ'
],
[
'
沈阳
'
,
'shenyang'
,
'SY'
],
[
'
三亚
'
,
'sanya'
,
'SY'
],
[
'
石家庄
'
,
'shijiazhuang'
,
'SJZ'
],
[
'
苏州
'
,
'suzhou'
,
'SZ'
],
[
'
汕头
'
,
'shantou'
,
'ST'
],
[
'
沙市
'
,
'shashi'
,
'SS'
],
[
'
思茅
'
,
'simao'
,
'SM'
],
[
'
鄯善
'
,
'shanshan'
,
'SS'
],
[
'
天津
'
,
'tianjin'
,
'TJ'
],
[
'
太原
'
,
'taiyuan'
,
'TY'
],
[
'
通化
'
,
'tonghua'
,
'TH'
],
[
'
通辽
'
,
'tongliao'
,
'TL'
],
[
'
铜仁
'
,
'tongren'
,
'TR'
],
[
'
塔城
'
,
'tacheng'
,
'TC'
],
[
'
武汉
'
,
'wuhan'
,
'WH'
],
[
'
乌鲁木齐
'
,
'wulumuqi'
,
'WLMQ'
],
[
'
温州
'
,
'wenzhou'
,
'WZ'
],
[
'
无锡
'
,
'wuxi'
,
'WX'
],
[
'
潍坊
'
,
'weifang'
,
'WF'
],
[
'
威海
'
,
'weihai'
,
'WH'
],
[
'
武夷山
'
,
'wuyishan'
,
'WYS'
],
[
'
芜湖
'
,
'wuhu'
,
'WH'
],
[
'
乌兰浩特
'
,
'wulanhaote'
,
'WLHT'
],
[
'
万州
'
,
'wanzhou'
,
'WZ'
],
[
'
梧州
'
,
'wuzhou'
,
'WZ'
],
[
'
乌海
'
,
'wuhai'
,
'WH'
],
[
'
西安
'
,
'xian'
,
'XA'
],
[
'
厦门
'
,
'xiamen'
,
'XM'
],
[
'
徐州
'
,
'xuzhou'
,
'XZ'
],
[
'
西宁
'
,
'xining'
,
'XN'
],
[
'
西双版纳
'
,
'xishuangbanna'
,
'XSBN'
],
[
'
襄樊
'
,
'xiangfan'
,
'XF'
],
[
'
邢台
'
,
'xingtai'
,
'XT'
],
[
'
西昌
'
,
'xichang'
,
'XC'
],
[
'
兴城
'
,
'xingcheng'
,
'XC'
],
[
'
兴宁
'
,
'xingning'
,
'XN'
],
[
'
锡林浩特
'
,
'xilinhaote'
,
'XLHT'
],
[
'
烟台
'
,
'yantai'
,
'YT'
],
[
'
盐城
'
,
'yancheng'
,
'YC'
],
[
'
银川
'
,
'yinchuan'
,
'YC'
],
[
'
延安
'
,
'yanan'
,
'YA'
],
[
'
宜宾
'
,
'yibin'
,
'YB'
],
[
'
宜昌
'
,
'yichang'
,
'YC'
],
[
'
义乌
'
,
'yiwu'
,
'YW'
],
[
'
延吉
'
,
'yanji'
,
'YJ'
],
[
'
运城
'
,
'yuncheng'
,
'YC'
],
[
'
永州
'
,
'yongzhou'
,
'YZ'
],
[
'
榆林
'
,
'yulin'
,
'YL'
],
[
'
依兰
'
,
'yilan'
,
'YL'
],
[
'
元谋
'
,
'yuanmou'
,
'YM'
],
[
'
伊宁
'
,
'yining'
,
'YN'
],
[
'
郑州
'
,
'zhengzhou'
,
'ZZ'
],
[
'
张家界
'
,
'zhangjiajie'
,
'ZJJ'
],
[
'
舟山
'
,
'zhoushan'
,
'ZS'
],
[
'
遵义
'
,
'zunyi'
,
'ZY'
],
[
'
湛江
'
,
'zhanjiang'
,
'ZJ'
],
[
'
昭通
'
,
'zhaotong'
,
'ZT'
]];
function
$(obj)
{
return
document.getElementById(obj);
}
function
$F(obj)
{
return
document.getElementById(obj).value;
}
function
gettipsobj()
{
return
document.getElementsByName(
"tip[]"
);
}
function
highlight(e)
{
var
tipobj=gettipsobj();
for
(
var
i=0;i<tipobj.length;i++)
{
tipobj[i].className=
"moff"
;
}
e.className=
"mon"
;
}
function
lowlight(e)
{
e.className=
"moff"
;
}
function
input(str)
{
$(
'searchbox'
).value=str;
closetip();
}
function
opentip()
{
$(
'tips'
).style.display=
'block'
;
var
tipbox=$(
'searchbox'
).style.width-2;
document.getElementById(
'tips'
).style.width=parseFloat(document.getElementById(
'searchbox'
).style.width)+4;
$(
'tipclosectrl'
).style.display=
'block'
;
$(
'tipclosectrl'
).style.width=document.documentElement.clientWidth+document.documentElement.scrollLeft;
$(
'tipclosectrl'
).style.height=document.documentElement.clientHeight+document.documentElement.scrollTop;
}
function
closetip()
{
$(
'tips'
).style.display=
'none'
;
$(
'tipclosectrl'
).style.display=
'none'
;
}
function
searchstr(str)
{
if
(str!=
''
&& str !=
' '
)
{
filterdata(cityData);
}else{
closetip();
}
}
function
filterdata(doc)
{
if
(doc)
{
var
str=$F(
'searchbox'
).toLowerCase();
//
默认转成小写，所以数据输出也需要转成小写以对应
var
listdiv=$(
'tips'
);
// var data=eval(doc);
var
tmp=
""
;
var
re=/[^\x00-\xff]/g;
if
(!re.test(str))
{
//
输入的是人名拼音
for
(
var
i=0;i<doc.length;i++)
{
var
newString = doc[i][2].toLowerCase();
if
(newString.indexOf(str)==0)
{
tmp+=
"<li onmousedown=\"input('"
+doc[i][0]+
"')\" onmouseout=\"lowlight(this)\">"
+doc[i][0]+
"</li>"
;
}
}
}else{
for
(
var
i=0;i<doc.length;i++)
{
if
(doc[i][0].indexOf(str)==0)
{
tmp+=
"<li onmousedown=\"input('"
+doc[i][0]+
"')\" onmouseout=\"lowlight(this)\">"
+doc[i][0]+
"</li>"
;
}
}
}
if
(tmp!=
''
)
{
tmp=
"<ul>"
+tmp+
"</ul>"
;
listdiv.innerHTML=tmp;
opentip();
}
}
}
</
script
>
<
style
type
=
"text/css"
>
<!--
#search #tips {
width: 200px;
background-color: #FFFFFF;
padding: 0px;
position: absolute;
margin-top: 23px;
border: 1px solid #000000;
z-index: 499;
display: none;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#search #tips ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#tips .mon {
background-color: #316AC5;
padding-left: 10px;
color: #FFFFFF;
}
#tips li {
margin: 0px;
padding-top: 3px;
padding-bottom: 3px;
padding-left: 10px;
display: block;
}
#tipclosectrl {
display: none;
background-color: #000000;
filter: Alpha(Opacity=0);
position: absolute;
z-index: 300;
left: 0px;
top: 0px;
}
-->
</
style
>
</
head
>
<
body
>
<
p
>
</
p
>
<
div
id
=
"search"
>
<
div
id
=
"tips"
>
加载中
...
</
div
>
<
input
name
=
"searchbox"
type
=
"text"
id
=
"searchbox"
onkeyup
=
"searchstr(this.value)"
style
=
"width:200px"
/>
<!--
需要给
searchbox
设置一个
width -->
</
div
>
<
div
id
=
"tipclosectrl"
onmousedown
=
"closetip()"
><
iframe
src
=
""
style
=
"position:absolute;top:0px; left:0px; width:100px; height:200px;filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';"
></
iframe
>
</
div
>
<
input
type
=
"submit"
name
=
"submit"
value
=
"
查询
"
/>
<
p
>
本
DEMO
用于输入中文地名、人名时的附加提示，可输入名字的局部或拼音简写（例如
“
郑州
”
，可以输入
“
郑
”
、
“
郑州
”
、
“zz" "","z"
本例还解决了
div
覆盖层的功能。需要完善的是获取键盘上下键事件，即用键盘上下键可以选择内容。
</
p
>
</
body
>
</
html
>
|