[removed] How to show country code based on countr

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

回答1:

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

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

Cheers!

回答2:

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/

回答3:

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.