InputPhone

<script>
    //<![CDATA[
    var myGeoIpLookup = function (success, failure) {
        $.get("https://ipinfo.io", function () {
        }, "jsonp").always(function (resp) {
            var countryCode = (resp && resp.country) ? resp.country : "";
            success(countryCode);
        });
    }
    //]]>
</script>
<h:form id="frmPhone">
    <p:messages id="msgs">
        <p:autoUpdate/>
    </p:messages>
    <div class="card">
        <h5>Basic</h5>
        <pe:inputPhone id="basic"
                       initialCountry="us"
                       value="#{inputPhoneView.phoneNumber}"
                       required="true"
                       requiredMessage="Basic is required!"
                       formatOnDisplay="true">
            <p:ajax event="countrySelect" listener="#{inputPhoneView.onCountrySelect}" process="@none"/>
        </pe:inputPhone>
        <p:commandButton value="Submit" update="@form" actionListener="#{inputPhoneView.submit}" styleClass="ml-3"/>

        <h5>Localized</h5>
        <pe:inputPhone id="localized"
                       initialCountry="nl"
                       onlyCountries="nl,be,de"
                       localizedCountries="{'nl':'Nederland','be':'België','de':'Duitsland'}"
                       value="#{inputPhoneView.localized}"/>

        <h5>GEO IP Lookup</h5>
        <pe:inputPhone id="geoIp"
                       initialCountry="auto"
                       geoIpLookup="myGeoIpLookup"
                       value="#{inputPhoneView.geoIp}">
        </pe:inputPhone>

        <h5>Disabled</h5>
        <pe:inputPhone disabled="true"/>
    </div>
</h:form>