一般可輸入的下拉框都需要類比，比較繁瑣，這裡給出一個簡單的Demo展現不需要類比的可輸入下拉框。。。
在此使用了大量的blur和focus，主要是從細節考慮，提升使用者體驗。。。 ^^
code如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br /><html><head></p><p> <title></title><br /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><br /> <mce:script type="text/javascript" src="jquery.js" mce_src="jquery.js"></mce:script><br /> <mce:script type="text/javascript"><!--<br /> var values = ["test1","test2","test3","test4","test5","test6","test7","test8",];<br /> $(function(){<br /> $("#imgdropdown ").click(function(){<br /> $("#selectspan").show();<br /> $("#select").focus();<br /> });</p><p> $("#select").focus(function(){<br /> $(this).attr("size", $("option",$("#select")).size());<br /> }).change(function(){<br /> $(this).attr("size", 1);<br /> $("#selectspan").hide();<br /> $("#input").val($("#select").val());<br /> $("#input").focus();<br /> }).blur(function(){<br /> $(this).attr("size", 1);<br /> $("#selectspan").hide();<br /> });<br />for(var i = 0; i < values.length; i++)<br />{<br />$("#select").append("<option value=/"" + values[i] + "/" title='"<br /> + values[i] + "'>"<br /> + values[i] + "</option>");<br />}</p><p>$("#input").keyup(function (){<br /> empty();<br /> }).focus(function (){<br /> empty();<br /> });</p><p> });<br />function empty(){<br />if($("#input").val().replace(//s/gi,"") != ''){<br /> $("#okbtn").removeAttr("disabled");<br /> }else{<br /> $("#okbtn").attr("disabled","true");<br /> }<br />}</p><p> function save(){<br /> for(var i = 0; i < values.length; i++)<br />{<br /> if($("#input").val() == values[i])<br /> {<br /> var isRepeat = confirm(values[i] + " already exists. Do you want to replace it?");<br /> if(!isRepeat){<br /> $("#input").empty();<br /> $("#input").focus();<br /> return;<br /> }else{<br /> //submit()<br /> window.close();<br /> }<br /> }<br />}<br /> //submit()<br /> window.close();<br /> }</p><p>// --></mce:script><br /> </head><br /> <body><br /> <div class="saveTag"><br /> <div class="saveTagPanel"></p><p> <span id="selectspan" class="none" style="border-right: 1px solid rgb(127, 157, 185); overflow: hidden; position: absolute; top: 30px; width: 259px; left: 69px;display:none"><br /> <select id="select" style="width: 287px; height: 80px;"><br /> </select><br /> </span><br /> <table style="background-color: rgb(240, 245, 249);" mce_style="background-color: #f0f5f9;"><br /> <tbody><tr><br /> <td><br /> Pls input:<br /> </td><br /> <td><br /> <table style="border: 1px solid rgb(127, 157, 185);" mce_style="border: 1px solid #7f9db9;" border="0" cellpadding="0" cellspacing="0" width="100%"><br /> <tbody><tr><br /> <td class="black"><br /> <input name="box" id="input" style="border: 0px none ; width: 240px; padding-left: 2px;"><br /> </td><br /> <td align="right" width="17"><br /> <img id="imgdropdown" style="padding: 1px;" mce_style="padding: 1px;" src="dropdown.gif" mce_src="dropdown.gif" border="0" height="16" width="16"><br /> </td><br /> </tr><br /> </tbody></table><br /> </td><br /> </tr><br /> </tbody></table><br /> </div><br /> <div class="saveTagBottom"><br /> <button onclick="save()" disabled="disabled" id="okbtn">ok</button><br /> </div><br /> </div><br /> </body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
