實現像google suggest自動完成功能
首先創(chuàng)建一個jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
<script type="text/javascript" src="js/controls.js"></script>
<style>
div.auto_complete {
width: 350px;
background: #fff;
}
div.auto_complete ul {
border:1px solid #888;
margin:0;
padding:0;
width:100%;
list-style-type:none;
}
div.auto_complete ul li {
margin:0;
padding:3px;
}
div.auto_complete ul li.selected {
background-color: #ffb;
}
div.auto_complete ul strong.highlight {
color: #800;
margin:0;
padding:0;
}
</style>
</head>
<body>
<input type="text" id="autocomplete"/>
<div id="results" class="auto_complete"></div>
<script type="text/javascript">
new Ajax.Autocompleter(
"autocomplete",
"results",
"list.html", {
method: "GET"
}
);
</script>
</body>
</html>
list.html
<ul>
<li>Aria</li>
<li>Aaaa</li>
<li>Afdsa</li>
<li>bsa</li>
</ul>
上面list.html采用靜態(tài)頁面返回列表，讀者可以使用動態(tài)頁面返回結果。