I am trying to generate the telephone input field and I have got success.

Requirement 1: Need to display Country flag along with the country name as soon the dropdown requirement 2: once the country is got selected it would display the country code in the next text filed.

the output would be like this:

$("#mobile-number").intlTelInput({
  initialCountry: "auto",
  geoIpLookup: function(callback) {
    $.get('', function() {}, "jsonp").always(function(resp) {
      var countryCode = (resp && resp.country) ? resp.country : "";
      callback(countryCode);
    });
  },
  utilsScript: ".0.9/js/utils.js" // just for formatting/placeholders etc
});

<script src=".11.1/jquery.min.js"></script>
<script src=".js"></script>
<link href=".css" rel="stylesheet" />
<link href=".css" rel="stylesheet" />

<h1>A demo with IP lookup</h1>
<form style="margin-left:150px;">
  <input type="tel" id="mobile-number" placeholder="e.g. +1 702 123 4567">
</form>

I am trying to generate the telephone input field and I have got success.

Requirement 1: Need to display Country flag along with the country name as soon the dropdown requirement 2: once the country is got selected it would display the country code in the next text filed.

the output would be like this:

$("#mobile-number").intlTelInput({
  initialCountry: "auto",
  geoIpLookup: function(callback) {
    $.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) {
      var countryCode = (resp && resp.country) ? resp.country : "";
      callback(countryCode);
    });
  },
  utilsScript: "https://cdnjs.cloudflare./ajax/libs/intl-tel-input/11.0.9/js/utils.js" // just for formatting/placeholders etc
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://www.jquery-az./jquery/js/intlTelInput/intlTelInput.js"></script>
<link href="https://www.jquery-az./jquery/css/intlTelInput/demo.css" rel="stylesheet" />
<link href="https://www.jquery-az./jquery/css/intlTelInput/intlTelInput.css" rel="stylesheet" />

<h1>A demo with IP lookup</h1>
<form style="margin-left:150px;">
  <input type="tel" id="mobile-number" placeholder="e.g. +1 702 123 4567">
</form>

• javascript
• html
• css

• I'm not seeing a question here. Are you looking for help in getting the country code into the text field? – Heretic Monkey Commented Aug 4, 2021 at 14:12
• yes and the name of the country with flag display as a label – user3181077 Commented Aug 4, 2021 at 14:53
• Here are some SO-questions that could help: Get the full number using intlTelInput How to get IDD code using ip address in javascript? and the Github page – biberman Commented Aug 4, 2021 at 14:55

1 Answer 1

I try with jQuery.

$("#mobile-number").intlTelInput({
  initialCountry: "auto",
  geoIpLookup: function(callback) {
    $.get('https://ipinfo.io', function() {}, "jsonp").always(function(resp) {
      var countryCode = (resp && resp.country) ? resp.country : "";
      callback(countryCode);
      init();
    });
  },
  utilsScript: "https://cdnjs.cloudflare./ajax/libs/intl-tel-input/11.0.9/js/utils.js" // just for formatting/placeholders etc
});
function init() {
    $(".selected-flag").css("width", "150px");
    $(".selected-flag").append($("<div id='country-name'>"+name+"</div>").css({
        "position": "absolute",
        "top": "0",
        "bottom": "0",
        "right": "0",
        "width": "100",
        "display": "flex",
        "align-items": "center",
        "overflow": "hidden",
        "white-space": "nowrap"
    }));
    $("#mobile-number").css({"padding-left":"150px", "width":"300px"});
    showCountryAndCode();
};
$(".country-list li").click(function() {
    showCountryAndCode();
});
function showCountryAndCode() {
    setTimeout(() => {
        let name = $("li.active span.country-name").text();
        name = name.indexOf('(') > 0 ? name.substr(0, name.indexOf('(') - 1) : name;
        const code = $("li.active span.dial-code").text();
        $("#country-name").text(name);
        $("#mobile-number").val(code+" ");
    }, 0);
}

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://www.jquery-az./jquery/js/intlTelInput/intlTelInput.js"></script>
<link href="https://www.jquery-az./jquery/css/intlTelInput/demo.css" rel="stylesheet" />
<link href="https://www.jquery-az./jquery/css/intlTelInput/intlTelInput.css" rel="stylesheet" />

<h1>A demo with IP lookup</h1>
<form style="margin-left:150px;">
  <input type="tel" id="mobile-number" placeholder="e.g. +1 702 123 4567">
</form>

I wish this helps you.