Javascript: How to show country code based on country name entered in text box

Question

I want to create a web page with a text box. When one types the country name in the text box, the area below the text box should show the dialing code for that country along with the country name. For eg, if someone types "England" in the text box, a text should appear somewhere below the text box as "Country:England Code+44" or if someone inputs "India" in the text box, something like "Country:India Code:+91" should be displayed.

Can this be done in html using javascript but without using any database,i.e. purely using javascript? I mean the javascript should match the country name that is entered in the text box with the dialing code based on some pre defined rules in the javascript itself and display the country name as well as the code.

Please help me out with the html code as well as the javascript.

Thank you

Welcome to Stack Overflow. Unfortunately, this question is off-topic. We do not give out code here - we will help with _specific_ code issues you have, but we need to see some effort made first. — Oded, Oct 26 '12 at 21:11

Wh1T3h4Ck5 · Accepted Answer · 2012-10-27T10:37:05.873

Bellow you can see on-page javascript solution. In practice this is not the best way how to do this. However this is just a quick idea...

Code sample

<html>
<head>
  <title>Test</title>
</head>

<body onload="document.getElementById('myedit').value=''">

  <input type="text" id="myedit" onchange="editChange()" onkeyup="editChange()" />
  <div id="result">&nbsp;</div>

  <script type="text/javascript">
  <!--
  // list of codes
  var cCode = new Array();
  cCode[0] = '+44';
  cCode[1] = '+1';
  cCode[2] = '+381';
  cCode[3] = '+20';
  // ... etc ...

  // list of countries
  var cName = new Array();
  cName[0] = 'England';
  cName[1] = 'USA';
  cName[2] = 'Serbia';
  cName[3] = 'Egypt';
  // ... etc ...

  function editChange() {
    obj = document.getElementById('myedit');
    s = obj.value.toLowerCase();
    res = '';
    for (i=0; i<cName.length; i++) {
      s2 = cName[i].toLowerCase().substr(0, s.length);
      if (s2 == s && s != '') res += 'Country: <b>' + cName[i] + '</b>, dialing code: <b>' + cCode[i] + '</b><br />';
      }
    document.getElementById('result').innerHTML = res == '' ? '<i>no result found!</i>' : res;
    }
  -->
  </script>

</body>
</html>

Preview

enter image description here

Modify this to fit your needs.

Or even simpler version with same results would be:

  // country,code (w/ no '+' prefix)
  var cCode = new Array();
  cCode[0] = 'England,44';
  cCode[1] = 'USA,1';
  cCode[2] = 'Serbia,381';
  cCode[3] = 'Egypt,20';
  // ... more countries & dialing codes ...

  function editChange() {
    obj = document.getElementById('myedit');
    s = obj.value.toLowerCase();
    res = '';
    for (i=0; i<cCode.length; i++) {
      s2 = cCode[i].toLowerCase().substr(0, s.length);
      if (s2 == s && s != '') {
        sp = cCode[i].split(',');
        res += 'Country: <b>' + sp[0] + '</b>, dialing code: <b>+' + sp[1] + '</b><br />';
        }
      }
    document.getElementById('result').innerHTML = res == '' ? '<i>no result found!</i>' : res;
    }

Example #2

Consider this code

  // country,code (w/ no '+' prefix),image-name,target url
  var cCode = new Array();
  cCode[0] = 'United Kingdom,44,gbr.png,uk.html';
  cCode[1] = 'United States,1,usa.png,usa.html';
  cCode[2] = 'Serbia,381,srb.png,serbia.html';
  cCode[3] = 'Egypt,20,egy.png,egypt.html';
  cCode[4] = 'Sudan,249,sud.png,sudan.html';
  cCode[5] = 'Senegal,221,sen.png,senegal.html';
  cCode[6] = 'Somalia,252,som.png,somalia.html';

  // ... more countries & dialing codes ...
  var flagsDirectory = 'flags/'; // ends with slash

  function editChange() {
    obj = document.getElementById('myedit');
    s = obj.value.toLowerCase();
    res = '';
    for (i=0; i<cCode.length; i++) {
      s2 = cCode[i].toLowerCase().substr(0, s.length);
      if (s2 == s && s != '') {
        sp = cCode[i].split(',');
        res += '<tr><td width="35"><img src="'+flagsDirectory+sp[2]+'" width="32" height="32" border="0" /></td><td><a href="'+sp[3]+'" style="color:blue;text-decoration:none;"">'+sp[0]+' (+'+sp[1]+')</a></td></tr>';
        }
      }
    if (res != '') {
      res = '<table style="font-family:arial,tahoma;font-size:12px;color:#000000">'+res+'</table>';
      }
    document.getElementById('result').innerHTML = res == '' ? '&nbsp;' : res;
    }

Note: I've created flags dir in script's directory and put some flags there for testing purpose.

Preview #2

enter image description here

Cheers!

Hey @Wh1T3h4Ck5 Thank you very much. I want to add country flag to the left of "Country:". The name of the flag is the country name. something like this . Also i am thinking of putting the entire search result in a table whereby the entire table row when clicked will direct to a page whose name would be the country name. Something like this:

cName[i] cCode[i]
Plz help — user1778266, Oct 27 '12 at 08:12
m8, please read FAQ because all your questions are going to be closed if you don't follow rules. I've updated my answer with another example showing how to expand list of parameters (and use it in code). This is not forum and answers must contain `ANSWER TO ORIGINAL QUESTION ONLY` and nothing more. You can see in comments bellow your question why it was closed, because `SO IS NOT` place for `give me a code` questions, we just provide help for your code (you have to put it here and explain issues). You have to show your efforts before asking. That's what `what have you tried so far` stands for. — Wh1T3h4Ck5, Oct 27 '12 at 10:35

score 1 · Answer 2 · answered Oct 26 '12 at 21:15

Use autocomplete with AJAX. Here is an example:

http://jqueryui.com/autocomplete/#remote-jsonp

and on this site using Bootstrap:

http://stackoverflow.com/questions/9232748/twitter-bootstrap-typeahead-ajax-example

and more in depth jQuery UI explanation of this:

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-use-the-jquery-ui-autocomplete-widget/

score 1 · Answer 3 · answered Oct 26 '12 at 21:15

The answer is: Yes it can be done with JavaScript.

Now you need to think about where you are going to store that information.

You should google: JSON Object and learn to write one. If you're worried about how its presented, you'll have to look up some HTML & CSS. When you got some code, we'll help you fine tune it :)

Hope this helps.

Javascript: How to show country code based on country name entered in text box

3 Answers3

Code sample

Preview

Example #2

Preview #2

Linked