HTML/jQuery/js实现可编辑可输入下拉框

1、方案一

方案思路：输入框和下拉小三角紧密拼合，使样式上看起来像一个单纯的下拉框

① 优点：思路清晰，实现简单

② 缺点：样式很难做兼容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>InputSelect</title>

    <script type="text/javascript" src="jquery.js"></script>
</head>


<style>
    .di {
        position: relative; /*must*/
    }

    .sel {
        height: 25px;
        width: 150px;
        margin: 10px;
        padding: 0px;
        position: absolute; /*must*/
    }

    .inp {
        height: 21px;
        width: 130px;
        margin: 10px;
        padding: 0px;
        position: absolute; /*must*/
    }
</style>

<body>

<div class="di">
    <select id="unit1" class="sel" onchange="changeUnit()">
        <option value="m">米</option>
        <option value="cm">厘米</option>
        <option value="mm">毫米</option>
    </select>
    <input type="text" id="unit2" class="inp">
</div>

</body>
</html>

<script type="text/javascript">

    function changeUnit() {
        var text = $("#unit1").find("option:selected").text();
        $("#unit2").val(text);/*must*/
    }

</script>

效果图：

参考资料，链接

2、方案二

方案思路：监听键盘事件，将键盘输入值动态写入<option/>第一行

① 优点：样式无关，耦合度低

② 缺点：只能输入键盘字符，没法输入中文

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>InputSelect</title>

    <script type="text/javascript" src="jquery.js"></script>
</head>

<style>
    .sel {
        height: 25px;
        width: 150px;
        margin: 10px;
        padding: 0px;
    }
</style>

<body>

<select class="sel" onkeydown="inputSelect.del(this,event)"
        onkeyup="inputSelect.write(this,event)">
    <option value=""></option><!--must-->
    <option value="m">米</option>
    <option value="cm">厘米</option>
    <option value="mm">毫米</option>
</select>

</body>

<script type="text/javascript">
    var inputSelect = {
        del: function (obj, e) {
            if ((e.keyCode || e.which || e.charCode) == 8) {
                var opt = obj.options[0];
                opt.text = opt.value = opt.value.substring(0, opt.value.length > 0 ? opt.value.length - 1 : 0);
            }
        },
        write: function (obj, e) {
            if ((e.keyCode || e.which || e.charCode) == 8) return;
            var opt = obj.options[0];
            opt.selected = "selected";
            opt.text = opt.value += String.fromCharCode(e.charCode || e.which || e.keyCode);
        }
    };

</script>

</html>

效果图：

参考资料，链接

3、方案三

方案思路：引入第三方插件，如jquery-editable-select

下载地址：https://github.com/indrimuska/jquery-editable-select

① 优点：不用自己实现代码，快捷方便

② 缺点：样式未必符合需求，要自己动手改css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>editable-select</title>

    <script type="text/javascript" src="jquery.js"></script>

    <link rel="stylesheet" type="text/css" href="jquery-editable-select.css"/>
    <script type="text/javascript" src="jquery-editable-select.js"></script>
</head>

<body>

<select id="unit">
    <option value="m">米</option>
    <option value="cm">厘米</option>
    <option value="mm">毫米</option>
</select>

</body>

<script type="text/javascript">
    $("#unit").editableSelect();

</script>

</html>

效果图：

4、方案四

方案思路：结合方案二和方案一，监听事件实现显隐下拉框和输入框

① 优点：简单易维护

② 缺点：耦合度高，输入框和下拉框的长宽要保持一致

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>editAbleSelect</title>

    <script type="text/javascript" src="jquery.js"></script>
</head>

<style>
    .sel {
        height: 25px;
        width: 150px;
        margin: 10px;
        padding: 0px;
    }

    .inp {
        height: 20px; /*attention*/
        width: 145px; /*attention*/
        margin: 10px;
        padding: 0px;
    }
</style>
<body>

<select class="sel" onkeypress="editAbleSelect.start(this,event)">
    <option value=""></option>
    <option value="m">米</option>
    <option value="cm">厘米</option>
    <option value="mm">毫米</option>
</select>
<input class="inp" type="text" style="display: none;" onblur="editAbleSelect.end(this,event)"/>

</body>

<script type="text/javascript">
    /**
     * <select/>必须排列在<input/>之前
     * <select/> 至少有一个option
     * 建议第一个option为 <option value=""></option>
     */
    var editAbleSelect = {
        start: function (obj, e) {//回车事件
            if ((e.keyCode || e.which || e.charCode) == 13) {
                var select = $(obj);
                var input = select.next();
                var value = select.val();

                input.val(value);
                select.hide();
                input.show();
                input.focus();
            }
        },
        end: function (obj, e) {//失焦点事件
            var input = $(obj);//dom → jdom
            var select = input.prev();
            var value = input.val();

            var option = select.children(":first");
            option.attr("selected", true);
            option.text(value);
            option.val(value);

            select.show();
            input.hide();
        }
    };

</script>
</html>

效果图：

HTML/jQuery/js实现可编辑可输入下拉框

猜你喜欢