如果僅考慮客戶端，那麽用的就是數據字典，將數據緩存起來。
考慮到數據來自於服務端的比較多，且結合AJAX技術，下拉框中的內容每發生壹次改變，就會查詢壹次服務器，然後服務端對客戶端的請求進行處理，找到響應的數據，並反饋給客戶端，然後客戶端進行顯示，這種下拉框式的列表，如今壹般都是自己寫的樣式了。 為避免頁面重復刷新，推薦使用AJAX進行異步交互。<html><head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>123</title>
<style type="text/css">
#list
{
height: 100px;
width: 155px;
border:1px solid #FFCC00;
}
</style>
</head>
<body>
<input id="search"/>
<div id="list" style="display: none;">
<ul id="group">
</ul>
</div>
</body>
<script LANGUAGE="JAVASCRIPT">
var array = [["a", "ab", "abc"], ["d", "de", "def"]];
var search = document.getElementById("search");
var list = document.getElementById("list");?
var group = document.getElementById("group");
search.addEventListener("input", input, false);
//search.addEventListener("keyup", keyup, false);
function input(){
//刪除所有子節點
var children = group.childNodes;
while(group.lastChild)
{
group.removeChild(group.lastChild);
list.style.display = "none";
}
for(var i = 0; i < array.length; i++)
{
for(var j = 0; j < array[i].length; j++)
{
if(search.value.toString() == array[i][j])
{
list.style.display = "block";
show(array[i]);
}
}
}
}
//顯示內容
function show(arr){
var temp = arr;
for(var k = 0; k < temp.length; k++)
{
if(temp[k].indexOf(search.value) > -1)
{
var ele = document.createElement("li");
group.appendChild(ele);
ele.innerHTML = temp[k];
}
}
}
</script>
</html>
如果要兼容IE，input事件名稱要做修改。