📄 autosuggestcity.htm
字号:
<!--
作者：邓瑞龙
名称：自动补全控件
创建日期：2008年2月25日
功能描述：聚焦该控件的时候，由键盘事件驱动，自动地补全输入的内容，并且将它罗列在下拉菜单中以供用户选择。
使用说明：在类似于TD标签中，以IFRAME的形式装入该控件，如下显示：
……
<TD style="COLOR: #02368d" align="left" id="autoSuggestCity">
<IFRAME border=0 marginWidth=0 marginHeight=0 src="autoSuggestCity.htm" frameBorder=no width="100%" scrolling=no height="250"></IFRAME>
</TD>
……
-->
<HTML>
<HEAD>
<META http-equiv=content-type content="text/html; charset=gbk">
<STYLE type=text/css>
BODY {
BACKGROUND: #fff; FONT: 76%/1.5 Arial,sans-serif; COLOR: #333
}
input{
width:200px;border: 1px solid #86B9D6;
}
#reg_div{
color: #154BA0;
border: 1px solid #86B9D6;
background: #D9EEF9;
position: absolute;
z-index: 30;
width:200px;
height:200px;
font-size:12px;
}
.city{
width:200px;
float:left;
}
.ps_div{
padding:5px 5px 1px 5px;
border-bottom:1px dotted #ccc;
text-align:right;
}
</STYLE>
<!--导入自定义的哈希对象-->
<script language="javascript" src="HashMap.js"></script>
<script language="javascript" src="autoCompleteSuggest.js"></script>
</HEAD>
<body>
<script>
//收起下拉菜单
function Object_Onclick(){
if(document.activeElement.id!="input_01"){
// alert("dd")
getObject(reg_div).style.display='none';
//document.getElementById("input_01").value = document.getElementById("city_00").innerHTML;
}
}
window.document.onclick= Object_Onclick;
</script>
<input id="input_01" name="input_01" type="text" onfocus="displayDropDownMenu(this);" style="width:200px;" onKeyUp="autoSuggestFunc(event);">
<div id=reg_div style="display:none">
<div id="city_00" class=city onclick="hideDropDownMenu(this)" onMouseOver="overed(this);" onMouseOut="outed(this);">北京</div><br>
<div id="city_01" class=city onclick="hideDropDownMenu(this)" onMouseOver="overed(this);" onMouseOut="outed(this);">上海</div><br>
<div id="city_02" class=city onclick="hideDropDownMenu(this)" onMouseOver="overed(this);" onMouseOut="outed(this);">广州</div><br>
<div id="city_03" class=city onclick="hideDropDownMenu(this)" onMouseOver="overed(this);" onMouseOut="outed(this);">深圳</div><br>
<div id="city_04" class=city onclick="hideDropDownMenu(this)" onMouseOver="overed(this);" onMouseOut="outed(this);">三亚</div><br>
<div id="city_05" class=city onclick="hideDropDownMenu(this)" onMouseOver="overed(this);" onMouseOut="outed(this);">青岛</div><br>
<div id="city_06" class=city onclick="hideDropDownMenu(this)" onMouseOver="overed(this);" onMouseOut="outed(this);">杭州</div><br>
<div id="city_07" class=city onclick="hideDropDownMenu(this)" onMouseOver="overed(this);" onMouseOut="outed(this);">南京</div><br>
<div id="city_08" class=city onclick="hideDropDownMenu(this)" onMouseOver="overed(this);" onMouseOut="outed(this);">厦门</div><br>
<div id="city_09" class=city onclick="hideDropDownMenu(this)" onMouseOver="overed(this);" onMouseOut="outed(this);">大连</div><br>
<div class=ps_div onclick="closeAutoSuggest()">关闭</div>
</div>
</body>
</HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -