jq、js 实现可手动输入搜索input下拉框---手机区号

最新推荐文章于 2024-07-16 11:07:16 发布

欲与晨风共行

最新推荐文章于 2024-07-16 11:07:16 发布

阅读量974

点赞数

分类专栏： JS JQ

本文链接：https://blog.csdn.net/weixin_45734686/article/details/120778474

版权

jQuery 区号插件动态筛选模糊查询自动填充

关键词由CSDN通过智能技术生成

JS 同时被 2 个专栏收录

34 篇文章 0 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

  
    /* 手机区号 */

    
.id_areaCode {
    position: relative;
    height: 100%;
}

.areaCode_ul {
    display: none;
    position: absolute;
    width: 4.80rem;
    height: 4.00rem;
    z-index: 88;
    /* margin-top: 30rem; */
    /* padding: 0 20rem; */
    font-size: 0.18rem;
    background: #fff;
    border: 1px solid #c2e1f5;
    cursor: default;
    overflow: auto;
}
    
.areaCode_ul li {
    display: flex;
    justify-content: space-between;
    padding: 0.05rem 0.20rem;
    font-family: 'Rubik-Regular';
    line-height: 0.32rem;
    font-size: 0.26rem;
}

.areaCode {
    width: 1.50rem;
    font-size: 0.28rem;
    padding-left: 0.10rem;
    height: 100%;
}
.after {
    display: none;
    position: absolute;
    bottom: -0.30rem;
    left: 0.20rem;
}

.after:after {
    content: "";
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border: solid transparent;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-bottom-color: #c2e1f5;
    border-width: 0.12rem;
    /*margin-left: -10rem;*/
    bottom: 100%;
    z-index: 89;
}

#areaCode_ul {
    top: -0.30rem;
    left: 0;
    transform: translateY(-100%);
}

<div class="id_areaCode font-16">
                                <input type="text" name="areaCode" id="areaCode" autocomplete="off" maxlength="20" class="areaCode c-999999" placeholder="area code"/>
                                <ul id="areaCode_ul" class="nxj_roll areaCode_ul">
                                </ul>
                                <!-- <div id="after1" class="after"></div> -->
                            </div>

let areaCodeList = [{
        english_name: "Andorra",
        chinese_name: "安道尔",
        country_code: "AD",
        value: "+376"
    },

    {
        english_name: "Afghanistan",
        chinese_name: "阿富汗",
        country_code: "AF",
        value: "+93"
    },
    {
        english_name: "Antigua and Barbuda",
        chinese_name: "安提瓜和巴布达",
        country_code: "AG",
        value: "+1268"
    }]
;(function($){
    $.fn.extend({
        // 筛选手机区号
        phoneCode:function(phoneCode, areaCode){
            //这里写插件代码
            areaCodeList.forEach(function (element) {
                areaCode.append("<li value=" + element.value + "  areaName=" + element.chinese_name + ">\n" +
                    // "            <span class='areaName'>" + element.chinese_name + "</span>\n" +
                    "            <span class='areaEglh'>" + element.english_name + "</span>\n" +
                    "        </li>")
            })
            // 点击显示
            phoneCode.click(function () {
                areaCode.toggle();
                // after.toggle();
            });
            // 点击任意位置隐藏
            document.addEventListener("click", clickHidden);//所有组件添加点击事件
            let id1 = phoneCode.attr('id');//获取菜单节点，菜单id为menu
            let id2 = areaCode.attr('id');
            function clickHidden(eve) {
                if (eve.target.id != id1 && eve.target.id != id2) {//点击的如果不是菜单，菜单隐藏。如果是菜单，菜单显现
                    areaCode.css('display', 'none');
                    // after.css('display', 'none');
                }
            }
            // 选中区号时隐藏
            areaCode.on('click', 'li', function () {
                let id2 = areaCode.attr('id');
                // if(id2 == 'areaCountryId'){
                phoneCode.val($(this).attr('value'));
                $('#phoneCountryName').val($(this).attr('areaName'))
                // }else {
                // phoneCode.val($(this).val());
                // }
                areaCode.css('display', 'none');
                // after.css('display', 'none');
            });
            // 模糊查询
            phoneCode.on('input',function () {
                let val = $(this).val();
                var count = 0;
                if (val != "") {
                    areaCode.children('li').each(function(i) {
                        // var contentValue = $(this).children('.areaName').text();
                        var contentValue = $(this).attr('value');
                        contentValue += $(this).children('.areaEglh').text();

                        if (contentValue.toLowerCase().indexOf(val.toLowerCase()) < 0) {
                            $(this).hide();
                            count++;
                        } else {
                            $(this).show();
                        }
                        if (count == (i + 1)) {
                            areaCode.hide();
                            // after.hide();
                        } else {
                            areaCode.show();
                            // after.show();
                        }
                    });
                } else {
                    areaCode.children('li').each(function(i) {
                        $(this).show();
                        areaCode.show();
                        // after.show();
                    });
                }
            });
            // 失去焦点时
            phoneCode.on('blur', function () {
                let id = phoneCode.val();
                let findInfo = areaCodeList.find(function (value) {
                    return value.value == id;
                });
                if (findInfo) {
                    phoneCode.val(findInfo.value);
                }else {
                    phoneCode.val('');
                }
            });
        }
    })
})(jQuery);

// 手机区号
var phoneCode1 = $("#areaCode");
var areaCode_1 = $("#areaCode_ul");
$().phoneCode(phoneCode1,areaCode_1);