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

后端 未结 3 1569
太阳男子
太阳男子 2020-12-08 02:22

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:

相关标签:
3条回答
  • 2020-12-08 02:52

    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
    0 讨论(0)
  • 2020-12-08 03:05

    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.

    0 讨论(0)
  • 2020-12-08 03:11

    <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

    0 讨论(0)
提交回复
热议问题