【JSP开源代码栏目提醒】:文章导读:在新的一年中,各位网友都进入紧张的学习或是工作阶段。网学会员整理了JSP开源代码-autocomplete.jsp的相关内容供大家参考,祝大家在新的一年里工作和学习顺利!
<%@ include file="/taglibs.jsp"%>
<head>
<title>City/State Lookup</title>
<script type="text/javascript" src="${ctx}/dwr/interface/LocationDAO.js"></script>
<script type="text/javascript" src="${ctx}/dwr/engine.js"></script>
<script type="text/javascript" src="${ctx}/dwr/util.js"></script>
</head>
<script type="text/javascript">
function getCityAndState() {
zip = DWRUtil.getValue('zip');
DWRUtil.useLoadingMessage();
LocationDAO.getLocation(fillForm, zip);
}
function fillForm(location) {
DWRUtil.setValues(location);
if (DWRUtil.getValue('city') == '') {
Effect.Shake('zip');
new Effect.Highlight('zip');
} else {
new Effect.Highlight('city');
new Effect.Highlight('state');
}
}
</script>
<style type="text/css">
label { display: block }
.autocomplete {
border: 1px solid black;
background-color: white;
}
.autocomplete li, .autocomplete ul {
background-image: none !important;
padding: 0;
margin: 0;
}
.autocomplete ul { margin-left: 15px }
.autocomplete li:hover {
background-color: #ffd !important;
border-top: 1px solid silver;
border-bottom: 1px solid silver;
cursor: pointer;
}
</style>
<p id="info">Start typing in the "zip" field and a list of matching zip codes will be retrieved from the database (using script.aculo.us and Spring MVC on the backend). After you select a zip code, tab to the city field and it should be auto-populated for you. If you enter an invalid zip code, the zip code field will shake to indicate a validation error.</p>
<form>
<label for="zip">Zip:</label>
<input type="text" name="zip" id="zip" size="20" autocomplete="off" onfocus="Field.clear('city')"/>
<div id="codes" class="autocomplete" style="display:none"></div>
<br />
<label for="city">City/State:</label>
<input type="text" name="city" id="city" size="20" onfocus="getCityAndState()"/>
<input type="text" name="state" id="state" size="3"/><br />
<input type="reset" class="button" value="Start Over" onclick="Field.focus('zip')" style="margin-top: 5px"/>
</form>
<script type="text/javascript">
// get list of zip codes
new Ajax.Autocompleter('zip','codes','ajaxzips.html', { fullSearch: false, partialSearch: true });
</script>
上一篇:
authorList.jsp
下一篇:
上市公司会计信息披露中印象管理行为研究(上)