Intl tel input can not show search field

Design help Custom code
1

Hi everyone, currently I’m trying to apply Intl tel input to my phone number input, I’ve cloned this project from webflow, everything works well, the only concern is that the dropdown menu doesn’t have the search input, which I find a bit inconvienient, especially on mobile. I tried adding this countrySearch: true & useFullscreenPopup: true as the doc recommended, but doesn’t work. Here is my preview link Webflow - Upmesh - Global

Here is the code in the head tag

<!--International Phone Input Library-->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/9.0.6/css/intlTelInput.css'>
<link rel='stylesheet' href="https://jackocnr.com/node_modules/intl-tel-input/build/css/demo.css?3">

<!-- Custom CSS-->
<style>
  .intl-tel-input {
    width: 100%;
  }
  .intl-tel-input .country-list {
    border-radius: 8px;
    background-color: #fff;
    color: "#131313";
    height: 800px;
  }
</style>

Here’s the code in body tag

<!--International phone input-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/9.0.6/js/intlTelInput.js'></script>


<script>
 var input = $(".int-phone");

  input.intlTelInput({
    initialCountry: "sg",
    utilsScript:"https://cdn.jsdelivr.net/npm/intl-tel-input@18.1.1/build/js/utils.js",
    separateDialCode: true,
    useFullscreenPopup: true,
    countrySearch: true,
  });

  input.on("change", function () {
    input.intlTelInput("setNumber", input.val()); //Format phone number e.g: "(123) 456-7890"
    var fullPhone = input.intlTelInput("getNumber"); //Get number typed by user
    $("#full_phone").val(fullPhone); //Add the full phone number with the dial code on a hidden input with "#full_phone" ID e.g.  +11234567890
    var countryData = input.intlTelInput("getSelectedCountryData"); //Get country data array
    var countryName = countryData.name; //Get country name
    $("#country").val(countryName); //Add country name on a hidden input with the "#country" ID
  });
</script>
2

Hi Mai,

You might like Kazuhiro’s version of this better, it’s pretty elegant.

  • It’s prettier
  • With the dropdown open you can type the first letter of a country to skip there
  • In the input if you type an international prefix the flag selector will change to match
  • Nice validation handling, e.g. invalid number, too short, etc. I’m not certain about localization if that’s important to you then you may need to augment it.
3

yess, but I’d like the search input right in dropdown menu, because on mobile, I tested, there’s no way to search & no keyboard popup :((

4

That’s a tricky one, I haven’t seen a solution that provides that.

I haven’t unpacked Kazuhiro’s approach recently but if it’s using a standard Webflow dropdown element you might be able to hybridize it using my autocomplete solution.

There you could put a separate input just for the prefix and when the user touches it, the keyboard would appear ( as it’s an input ), and the popup would expand to show options. begin typing prefix digits or a country name and it would filter to matches.

It would need a slight modification as I usually use this for navigation, but in your case you’d want the selected element to update the input instead.

A variation to this is to hide the input, but give it focus when the dropdown expands. Trickier to build but it allows you to keep the nice look of the selected flag and prefix.

I’d probably dig deeper into Made in Webflow and see if you can find a more mobile-friendly implementation.

1 Like
5

That’s very informative, I’ll try some other ways. Thank you so much for your help.