select/input 可输入+模糊匹配

select 可输入+模糊匹配

方法1

    <input list="cookies" placeholder="Type of Cookie"/>

    <datalist id="cookies">
        <option value="Chocolate Chip"/>
        <option value="Peanut Butter"/>
        <option value="Raisin Oatmeal"/>
    </datalist>

在线示例: http://jsfiddle.net/joshpauljohnson/Uv5Wk/

缺点：

目前IE10及其以下浏览器以及safari并不支持，并且IE11无法触发input和change事件，相当于IE系列均无法很好地实现。如果仅支持Chrome或Eletron桌面的应用则可以放心使用。

方法2

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="jquery.min.js"></script>
        <style type="text/css">
            .second {
                position: relative;
                margin: 100px 100px;
            }
            
            .second select {
                width: 100px;
                margin: 0px;
                outline: none;
                border: 1px solid #999;
                position: absolute;
                top: 34px;
                left: 0px;
                z-index: 1;
                border-radius: 2px;
            }
            
            .second select option {
                padding: 5px 5px;
            }
            
            .second select option:hover {
                background-color: #c8cbce;
                border-radius: 2px;
            }
            
            .second input {
                width: 100px;
                outline: none;
                border: 0px;
                line-height: 30px;
                height: 30px;
                border: 1px solid #999;
            }
        </style>
    </head>
    <body>
        <div class="second">
            <input type="text" name="makeupCo" id="makeupCo" class="makeinp" onfocus="setfocus(this)" oninput="setinput(this);" placeholder="请选择或输入" />
            <select name="makeupCoSe" id="typenum" onchange="changeF(this)" style="display:none;"></select>
        </div>
        <script type="text/javascript">
            var TempArr = ["1", "12", "123", "1234", "12345", "123456", "1234567"];
            $(function() {
                $(document).bind('click', function(e) {
                    var e = e || window.event;
                    var elem = e.target || e.srcElement;
                    while (elem) {
                        if (elem.id && (elem.id == 'typenum' || elem.id == "makeupCo")) {
                            return;
                        }
                        elem = elem.parentNode;
                    }
                    $('#typenum').css('display', 'none');
                });
            })

            function changeF(this_) {
                $(this_).prev("input").val($(this_).find("option:selected").text());
                $("#typenum").css({
                    "display": "none"
                });
            }

            function setfocus(this_) {
                $("#typenum").css({
                    "display": ""
                });
                var select = $("#typenum");
                select.empty();
                if (select) {
                    $("#typenum").attr("size", TempArr.length);
                    for (i = 0; i < TempArr.length; i++) {
                        var option = new Option(TempArr[i], TempArr[i]);
                        select.append(option);
                    }
                }
            }

            function setinput(this_) {
                var select = $("#typenum");
                select.html("");
                for (i = 0; i < TempArr.length; i++) {
                    if (TempArr[i].indexOf(this_.value) >= 0) {
                        var option = new Option(TempArr[i], TempArr[i]);
                        select.append(option);
                    }
                }
            }
        </script>
    </body>
    </html>

注: 需自行引入jquery.min.js

开发中遇到的问题:
1. select下拉框不会根据内容大小调整高度,后面发现有一个size属性, 设置显示的条数
2. 定位问题: 父级元素 relative , 子元素absolute
3. select更新的时候要记得重置 select.empty();

posted @ 2018-10-09 20:23 JonPan 阅读(734) 评论(0) 收藏举报

刷新页面返回顶部

JonPan

select/input 可输入+模糊匹配

select 可输入+模糊匹配

方法1

缺点：

方法2

公告