선택 드롭 다운 목록 상자는 입력 퍼지 쿼리 기능을 지원하며 디자인은 매우 사용자 친화적입니다. 아래 편집자는 키 코드를 공유했습니다. 필요에 따라 적절하게 추가하고 수정할 수 있습니다. 궁금한 점이 있으면 피드백을주십시오.
키 코드는 다음과 같습니다.
<html> <head> <meta http-equiv = 'content-type'content = 'text/html; charset = gb2312 '> <title> 입력 가능한 드롭 다운 상자 </title> </head> <body> <script language = "javaScript"> var j = 0; 함수 selectValue (obj) {var input = obj.parentNode.nextSibling; document.all.box2.value = obj.options [obj.selectedIndex] .text; document.getElementById ( "txtsection"). value = obj.options [obj.selectedIndex] .Value; alert (document.getElementById ( "txtsection"). value); } 함수 inputValue (obj) {var n = 1; var tmpobj; var src = document.all.selectOption; var msg = document.all.msg; if (event.keyCode! = 40 && event.keyCode! = 38 && event.keyCode! = 13) {if (obj.value! = "" ") {msg.style.display =" "; msg.innerhtml = ""; if (msg.haschildnodes ()) {msg.childnodes [0] .parentnode.removechild (msg.childnodes [0]); } for (var i = 0; i <src.length; i ++) {var selvalue = document.createElement ( "div"); var seltext = document.createElement ( "div"); seltext.value = src (i) .Value; seltext.innerhtml = src (i) .text; if (src (i) .text.tolowercase (). indexof (obj.value.tolowercase ()) == 0) {seltext.setattribute ( "id", "seltext"+n); seltext.onmouseOver = function () {this.style.backgroundColor = '#003399'; this.style.color = '#ffffff'; } seltext.onMouseOut = function () {this.style.backgroundColor = '#ffffff'; this.style.color = '#000000'; } seltext.onclick = function () {document.all.box2.value = this.innerhtml; msg.style.display = "none"; document.getElementById ( "txtsection"). value = this.value; } msg.appendChild (seltext); n ++; }}} else {document.all.msg.style.display = "none"; }} else {// down key if (event.keyCode == 40) {j ++; for (var i = 0; i <src.length; i ++) {tmpobj = document.getElementById ( "seltext"+i); if (tmpobj! = null) {tmpobj.style.backgroundcolor = '#ffffff'; tmpobj.style.color = '#000000'; }} tmpobj = document.getElementById ( "seltext"+j); if (tmpobj! = null) {tmpobj.style.backgroundcolor = '#003399'; tmpobj.style.color = '#ffffff'; } else {j = 0; }} // if (event.keyCode == 38) {j-; for (var i = 0; i <src.length; i ++) {tmpobj = document.getElementById ( "seltext"+i); if (tmpobj! = null) {tmpobj.style.backgroundcolor = '#ffffff'; tmpobj.style.color = '#000000'; }} tmpobj = document.getElementById ( "seltext"+j); if (tmpobj! = null) {tmpobj.style.backgroundcolor = '#003399'; tmpobj.style.color = '#ffffff'; } else {j = 2; }} // enter 키 if (event.keyCode == 13) {tmpobj = document.getElementById ( "seltext"+j); document.all.box2.value = tmpobj.innerhtml; msg.style.display = "none"; document.getElementById ( "txtsection"). value = tmpobj.value; }}} 함수 selmatch (src) {var currsel = document.all.box2.value; for (var i = 0; i <src.length; i ++) {if (src (i) .text == currsel) {src.options (i) .selected = true; }}} function nomsg () {if (document.activeElement.id == "msg") return false; else document.all.lsg.style.display = 'none'; . 22px; X는 250px; -232px; " onchange = "selectValue (this)"onclick = "selmatch (this)"id = "selectOption"name = "selectOption"> <옵션 값 = 'All'selected> all </옵션> <옵션 값 = '0Test1'> 0Test1 = 테스트 1 <옵션 값 = '0Test1'> 0Test2 = 옵션 1 옵션 = '0Test1'> 0Test1 '> 0Test1'> value = 'section'> section = 섹션 설명 xxxxx aaa </옵션> </select> </span> <input name = "box2"id = "box2"onkeyup = "inputValue (this)"onblur = "em nomsg ()"onfocus = "this.select (); inputValue (this)"0 "> <"msog " font-size : 14px; white-space; nowrap; 오버플로; 너비; 너비; 230px; 위치 : 절대; 왼쪽; 왼쪽 : 0px; display : none "> </div> </div> <입력 유형 ="txtsection "id ="txts ">위는 편집기가 소개 한 선택 드롭 다운 박스 퍼지 쿼리 기능의 구현 코드입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!