只要将 <script src='changSelectToInput.js'></script> 加入到页面的最后就可以实现下接列表变成具有ajax的输入框了。 changSelectToInput.js 源码如下: var varSelect = "select"; var varInput = "input"; var varDiv = "div"; var input; var objDiv; var objSelect; var arrySelect = document.getElementsByTagName(varSelect); for ( var m = 0; m < arrySelect.length; m++) { objSelect = arrySelect[m]; if (objSelect.length < 50) { continue; } input = document.createElement(varInput); objDiv = document.createElement(varDiv); input.style.position = "absolute"; input.style.top = getAbsoluteTop(objSelect); input.style.left = getAbsoluteLeft(objSelect) + 2; input.style.width = objSelect.clientWidth + 23; objDiv.style.position = "absolute"; objDiv.style.background = "white"; objDiv.style.top = getAbsoluteTop(objSelect) + 25; objDiv.style.left = getAbsoluteLeft(objSelect) + 2; objDiv.style.width=input.style.width; objDiv.style.border = "1px solid #CCCCD4"; objDiv.style.display = "none"; document.body.appendChild(input); document.body.appendChild(objDiv); input.id = varInput + "_" + m; objSelect.id = varSelect + "_" + m; objDiv.id = varDiv + "_" + m; input.attachEvent("onkeyup", function() { showList() }); } function getInputValue(obj) { var pobj = obj.parentElement.id; var varInt = pobj.substring(pobj.length - 1, pobj.length); input = document.getElementById(varInput + "_" + varInt); input.value = obj.innerText; objSelect = document.getElementById(varSelect + "_" + varInt); objDiv=document.getElementById(varDiv + "_" + varInt); objSelect.value = input.value; objDiv.style.display = "none"; } function addUnderLine(obj) { obj.style.background = '#DFE1EC'; } function cancelUnderLine(obj) { obj.style.background = '#FFFFFF'; } function getAbsoluteTop(ob) { if (!ob) { return null; } var mendingOb = ob; var mendingTop = mendingOb.offsetTop; while (mendingOb != null && mendingOb.offsetParent != null && mendingOb.offsetParent.tagName != "BODY") { mendingTop += mendingOb.offsetParent.offsetTop; mendingOb = mendingOb.offsetParent; } return mendingTop; } function getAbsoluteLeft(ob) { if (!ob) { return null; } var mendingOb = ob; var mendingLeft = mendingOb.offsetLeft; while (mendingOb != null && mendingOb.offsetParent != null && mendingOb.offsetParent.tagName != "BODY") { mendingLeft += mendingOb.offsetParent.offsetLeft; mendingOb = mendingOb.offsetParent; } return mendingLeft; } function showList() { var id = window.event.srcElement.id; var varInt = id.substring(id.length - 1, id.length); input = document.getElementById(id); objDiv = document.getElementById(varDiv + "_" + varInt); objSelect = document.getElementById(varSelect + "_" + varInt); objDiv.innerHTML = ""; objDiv.style.display = ""; var len = objSelect.options.length; var cnt = 0; for ( var i = 0; i < len; i++) { if (input.value != "" && input.value.toUpperCase() == objSelect.options[i].value .substring(0, input.value.length)) { objDiv.innerHTML = objDiv.innerHTML + "<div style="cursor:hand" mce_style="cursor:hand" οnmοuseοut='cancelUnderLine(this);' οnmοuseοver='addUnderLine(this);' οnclick='getInputValue(this)'>" + objSelect.options[i].value + "</div>"; if (++cnt == 20) { objDiv.innerHTML = objDiv.innerHTML + "...." break; } } } if (objDiv.innerHTML == "") { objDiv.style.display="none"; } else { objDiv.style.border = "1px solid #CCCCD4"; } objSelect.value = input.value; }