/* 手机区号 */.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为menulet 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);
