Do you know any opensource JQuery dropdown menu for telephone prefix?

Question

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:

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.

Nitriding

the link you shared already has the dropdown with flags as well, what else you want? – Metabolism

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. – Nitriding

I also needed this, so I built it: github.com/Bluefieldscom/intl-tel-input – Latin

@Latin you should add your comment as an answer so I can accept it for everyone benefit... – Nitriding

This plugin does not support some countries, phpinterviewquestions.co.in/blog/ionic/… – Angieangil

Answer 1

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:

• Flag images and CSS from https://github.com/lafeber/world-flags-sprite
• Country data from https://github.com/mledoze/countries
• Formatting and validation from the wonderful libphonenumber

Latin

Excellent plugin. You deserve a pat on the back :) (is there a way I could use my own list of countries, from my db?) – Goalkeeper

@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. – Latin

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 – Sheff

@SyedRasheed you can help with that effort! github.com/jackocnr/intl-tel-input/issues/405 – Latin

Did you manage translations ? for example if I want to get the list in french, how can I achieve this ? – Met

Thanks @Latin 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 #51674256 – Rhodium

Here is how to use the plugin in Django: github.com/ramtinabadi/intl-tel-input-django – Ganda

@Latin 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? – Boser

Hello Friends. In Small Devices This Plugin is not working. what to do – Numbles

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? – Kadner

Answer 2

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.

Archival

Answer 3

<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. [phone]">

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

Swellfish