34

I need to do a dropdown menu for entering telephone numbers. I want to do something similar as google does in his registration form. Something like this:

enter image description here

Do you know any opensource dropdown menu for telephone prefix?

I have looking in google and the most similar thing I have found is this menu. I can modify it to do what I want but it will take time and I think maybe someone has already did something similar.

NOTE: The link I am sharing contains only countries and flags. I am looking for a full dropdown containing flags, country names, country names in original language, ability to add a country first ignoring alphabetical order and international phone prefixes.

Oscar Foley
  • 6,817
  • 8
  • 57
  • 90
  • 2
    the link you shared already has the dropdown with flags as well, what else you want? – Furqan Hameedi Jun 26 '12 at 09:47
  • Thanks for comment, I think I was not clear enough. I have edited question and added a **NOTE** to clarify. I want full functionality with flags, country names, prefixes, original country names, etc. – Oscar Foley Jun 26 '12 at 09:52
  • 3
    I also needed this, so I built it: https://github.com/Bluefieldscom/intl-tel-input – jackocnr Jun 04 '13 at 15:19
  • @jackocnr you should add your comment as an answer so I can accept it for everyone benefit... – Oscar Foley Jun 04 '13 at 15:36
  • This plugin does not support some countries, http://phpinterviewquestions.co.in/blog/ionic/googles-libphonenumber-library-supported-country-list – sijo vijayan Jul 22 '17 at 08:29

3 Answers3

116

I also needed this, so I built it.

Here is a live demo.

It currently has the following features:

  • In the country dropdown you can navigate by typing, or using the up/down keys
  • Selecting a country updates the dial code of the entered number
  • Typing a different dial code automatically updates the displayed flag
  • Option to specify "preferred countries" (which appear at the top of the list)

I built it out of the following open source projects:

jackocnr
  • 17,068
  • 10
  • 54
  • 63
  • Excellent plugin. You deserve a pat on the back :) (is there a way I could use my own list of countries, from my db?) – Vishal Shah Jul 01 '14 at 12:56
  • 1
    @1nfected thanks, I'm glad you find it useful! The easiest way is to use the onlyCountries option, which will limit the displayed countries to the ones you specify. – jackocnr Jul 01 '14 at 15:10
  • This library is awesome, but i was wondering if it is possible to only use this to select country code from dropdown and don't have phone input. What i want to do is to have country code, area code and remainign phone number separately from user. Any hint will be great – Zia Ul Rehman Mughal Mar 02 '17 at 07:41
  • @SyedRasheed you can help with that effort! https://github.com/jackocnr/intl-tel-input/issues/405 – jackocnr Mar 08 '17 at 22:22
  • Did you manage translations ? for example if I want to get the list in french, how can I achieve this ? – Vincent Decaux Jul 31 '18 at 15:58
  • Thanks @jackocnr but I need a quick help, I noticed what is submitted to the post is just what the user enters, the country code does not merge with the user number and perhaps strip the zero in front of the numbers and merge the code to the number entered, I opened a new thread on this here https://stackoverflow.com/questions/51673756/submit-the-selected-country-code-with-phone-number-from-a-phone-number-field – optimalresource Aug 03 '18 at 13:29
  • 1
    Here is how to use the plugin in Django: https://github.com/ramtinabadi/intl-tel-input-django/ – Ramtin Aug 23 '18 at 08:07
  • @jackocnr I am facing an issue of `country` changed to `US` if `canada` is selected in dropdown. steps are `select canada`, `going to enter phone number`, at `2nd digit country switch to US`. I think its due to same phone code, but any suggestion how can I fix that? – softech Aug 07 '19 at 05:21
  • Hello Friends. In Small Devices This Plugin is not working. what to do – kannan D.S Dec 13 '19 at 07:09
  • Hi thanks for your plugin, I get a JS error "Cannot read property 'getAttribute' of null", I checked CSS class and all of them and it seems ok, do you have idea of what the problem is? – Marcello Perri Feb 15 '20 at 18:14
1

Well, you need a database which contains all the details of the phone-numbers, then you need to query the database through Ajax, return the results via Ajax too, and display it. After getting the results, you can create a div or p element of your own, populate them with the incoming data, and display it. if you don't want to do that, use jQuery UI Autocomplete.

SexyBeast
  • 7,913
  • 28
  • 108
  • 196
0

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/6.4.1/js/intlTelInput.min.js"></script>
<script type="text/javascript">
  $("#mobile-number").intlTelInput();
</script>
<head>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/6.4.1/css/intlTelInput.css">
  <title></title>
 </head>
<input type="tel" id="mobile-number" placeholder="e.g. +1 702 123 4567">

its work fine there is no probelm in code may be it will help for you thanks

header link https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/6.4.1/css/intlTelInput.css scripts http://code.jquery.com/jquery-latest.min.js https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/6.4.1/js/intlTelInput.min.js

java code $("#mobile-number").intlTelInput(); form code

hamza zaheer
  • 5
  • 1