select/input 可输入+模糊匹配

select 可输入+模糊匹配#

方法1
Copy
    <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
Copy
    <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();

参考：
特别推荐】几款极好的 JavaScript 下拉列表插件
创建一个看似简单的select下拉框
让Select选择框可编辑可输入可自动补全可下拉选择

posted @   JonPan  阅读(694)  评论(0)  编辑  收藏  举报
编辑推荐：
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
点击右上角即可分享
微信分享提示
AI IDE Trae
CONTENTS
✕