javascriptarraysinputcountry-codeslibphonenumber

Getting all country codes from libphonenumber-js and looping it out

I have a contact number input field and I was able to prepend a country code dropdown to the input field.

Now when user selects the country code, the number format will change according to the selected country code.

My question now is how do you loop all the country code out from the library and put it into the dropdown? I tried using some functions like "getSupportedRegions();" but it is saying undefined. I already have the script-src included in the head, am I doing it wrong?

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://unpkg.com/libphonenumber-js@^1.7.6/bundle/libphonenumber-min.js"></script>
</head>

<body>
    <label for="inputContactNumber">Contact Number</label>
        <div class="input-group mb-3">
            <div class="input-group-prepend">

        
            <select class="select-country" class="btn contact-btn dropdown-toggle">
                <option>SG</option> 
                <option>MY</option>
                <option>US</option>
                <option>TH</option>
            </select>
        </div>
        <input class="input-phone phone-format" class="form-control phone-format" type="text" name="contactNo" placeholder="Enter contact number" required//>
    </div>


<script type="text/javascript">

     $(".phone-format").keyup(function () {
            var val_old = $(this).val();
            var newString = new libphonenumber.AsYouType($(".select-country").val()).input(val_old);
            $(this).focus().val('').val(newString);
    });
</script>


</body>
</html>

Solution

  • The function you're looking for is libphonenumber.getCountries() (documentation).

    I added a call to this function at the beginning of your script with the code to generate the country option list:

    <!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://unpkg.com/libphonenumber-js@^1.7.6/bundle/libphonenumber-min.js"></script>
</head>

<body>
    <label for="inputContactNumber">Contact Number</label>
        <div class="input-group mb-3">
            <div class="input-group-prepend">

        
            <select class="select-country" class="btn contact-btn dropdown-toggle">
            </select>
        </div>
        <input class="input-phone phone-format" class="form-control phone-format" type="text" name="contactNo" placeholder="Enter contact number" required//>
    </div>


<script type="text/javascript">

    const countries = libphonenumber.getCountries();
    const optionList = countries.map( country => `<option>${country}</option>` );
    $(".select-country").html( optionList );

    $(".phone-format").keyup(function () {
        const val_old = $(this).val();
        const newString = new libphonenumber.AsYouType($(".select-country").val()).input(val_old);
        $(this).focus().val(newString);
    });
</script>


</body>
</html>

    I also changed var to const. Always use const when you can, or let if you need to mutate (reassign) a variable. And a minor point, in this line:

    $(this).focus().val('').val(newString);

    You don't need to do the val(''), just set the new value.