实用JS——输入文字模糊匹配下拉框中的选项

最新推荐文章于 2024-01-25 19:57:52 发布

不如喫茶去

最新推荐文章于 2024-01-25 19:57:52 发布

阅读量2.2k

点赞数

分类专栏： Js学习之路文章标签： js实现搜索可选项 js搜索选项 js搜索 js查询选择框内容

本文链接：https://blog.csdn.net/qq_32737755/article/details/88583164

版权

Js学习之路专栏收录该内容

14 篇文章 0 订阅

订阅专栏

我发现某些网站用户体验贼不好：填写信息，需要在选择框中下拉选择内容，关键的是选择框中选择项~贼~多！而且字体又小！

弄个效果图比如：

下拉选择框，内容极多！

拉了半天也没找到我想要选择的内容，好不容易找到了，点击（手机上操作）...不小心选了下面一行的内容.....还要再次从新下拉再找...

正好最近做项目遇到一个类似的功能，使用js做了个优化：

思路：使用输入框代替选择框，当输入框获取焦点后，选择框显示。在输入框中输入内容，选择框自动模糊查询将含有关键字的可选项自动筛选出来，然后用户再去点击选择框。

输入框替代选择框点击输入框，显示选择框

输入文字，选项自动过滤显示

这样相当于实现了在可选择项中，增加了查询的功能。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html" charset="UTF-8">
    <title></title>
    <meta name="Keywords" content="关键词">
    <meta name="description" content="描述">
</head>
<body>
<input type="text" name="makeupCo" id="makeupCo" class="makeinp" onfocus="setfocus(this)" oninput="setinput(this)" placeholder="请输入...">
<select id="udr_user_id" name="udr_user_id" onchange="changeF(this)" style="display: none;">
    <option value="">--请选择--</option>
    <option value="1">产品1</option>
    <option value="2">产品2</option>
    <option value="3">产品3</option>
    <option value="4">产品4</option>
    <option value="5">产品5</option>
    <option value="6">产品6</option>
    <option value="7">产品7</option>
    <option value="8">产品8</option>
    <option value="9">优惠产品1</option>
    <option value="10">优惠产品2</option>
    <option value="11">优惠产品3</option>
</select>
</body>
<script type="text/javascript" src="http://mat1.gtimg.com/libs/jquery/1.12.0/jquery.js"></script>
<script type="text/javascript">
    var TempArr = [];
    var IdsArr = [];
    $(function() {
        $("#udr_user_id option").each(function(index,el){
            TempArr[index] = $(this).text();
            IdsArr[index] = $(this).val();
        });
        $(document).bind("click",function(e){
            var e = e || window.event;
            var elem = e.target || e.srcElement;
            while(elem){
                if (elem.id && (elem.id == "udr_user_id" || elem.id == "makeupCo")) {
                    return;
                }
                elem = elem.parentNode;
            } 
            $("#udr_user_id").css("display","none");     
        });
    })

    $("#makeupCo").blur(function(){
        $("#makeupCo").val($("#udr_user_id").find("option:selected").text());
    })

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

    function setfocus(this_){
        $("#udr_user_id").css({"display":"","width":"100px"});
    }

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

不如喫茶去

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
实用JS——输入文字模糊匹配下拉框中的选项

我发现某些网站用户体验贼不好：填写信息，需要在选择框中下拉选择内容，关键的是选择框中选择项~贼~多！而且字体又小！弄个效果图比如：拉了半天也没找到我想要选择的内容，好不容易找到了，点击（手机上操作）...不小心选了下面一行的内容.....还要再次从新下拉再找...正好最近做项目遇到一个类似的功能，使用js做了个优化：思路：使用输入框代替选择框，当输入框获取焦点后，选择框显示。...
复制链接

扫一扫