可输入的下拉框&&输入框为空时的处理

发表于

 


一般可输入的下拉框都需要模拟，比较繁琐，这里给出一个简单的Demo展现不需要模拟的可输入下拉框。。。


在此使用了大量的blur和focus，主要是从细节考虑，提升用户体验。。。 ^^


 


如图：


 




 


code如下：


 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>

        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <mce:script type="text/javascript" src="jquery.js" mce_src="jquery.js"></mce:script>
        <mce:script type="text/javascript"><!–
        var values = ["test1","test2","test3","test4","test5","test6","test7","test8",];
        $(function(){
            $("#imgdropdown ").click(function(){
                $("#selectspan").show();
                $("#select").focus();
            });

            $("#select").focus(function(){
                $(this).attr("size", $("option",$("#select")).size());
            }).change(function(){
                $(this).attr("size", 1);
                $("#selectspan").hide();
                $("#input").val($("#select").val());
                $("#input").focus();
            }).blur(function(){
                $(this).attr("size", 1);
                $("#selectspan").hide();
            });
            for(var i = 0; i < values.length; i++)
            {
                $("#select").append("<option value=\"" + values[i] + "\" title=’"
                        + values[i] +  "’>"
                        + values[i] + "</option>");
            }

            $("#input").keyup(function (){
            empty();
        }).focus(function (){
            empty();
        });

        });
                function empty(){
                    if($("#input").val().replace(/\s/gi,"") != ‘’){
                $("#okbtn").removeAttr("disabled");
            }else{
                $("#okbtn").attr("disabled","true");
            }
                }


        function save(){
            for(var i = 0; i < values.length; i++)
            {
                if($("#input").val() == values[i])
                {
                    var isRepeat = confirm(values[i] + " already exists. Do you want to replace it?");
                    if(!isRepeat){
                        $("#input").empty();
                        $("#input").focus();
                        return;
                    }else{
                        //submit()
                        window.close();
                    }
                }
            }
            //submit()
            window.close();
        }

// –></mce:script>
    </head>
    <body>
        <div class="saveTag">
            <div class="saveTagPanel">

                <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">
                    <select id="select" style="width: 287px; height: 80px;">
                    </select>
                </span>
                <table style="background-color: rgb(240, 245, 249);" mce_style="background-color: #f0f5f9;">
                <tbody><tr>
                <td>
                Pls input:
                </td>
                <td>
                 <table style="border: 1px solid rgb(127, 157, 185);" mce_style="border: 1px solid #7f9db9;" border="0" cellpadding="0" cellspacing="0" width="100%">
                    <tbody><tr>
                        <td class="black">
                               <input name="box" id="input" style="border: 0px none ; width: 240px; padding-left: 2px;">
                        </td>
                        <td align="right" width="17">
                            <img id="imgdropdown" style="padding: 1px;" mce_style="padding: 1px;"  src="dropdown.gif" mce_src="dropdown.gif" border="0" height="16" width="16">
                        </td>
                    </tr>
                </tbody></table>
                </td>
                </tr>
                </tbody></table>
            </div>
            <div class="saveTagBottom">
                <button onclick="save()" disabled="disabled" id="okbtn">ok</button>
            </div>
        </div>
    </body></html>