使用Javascript：如何基于在文本框中输入国名显示国家代码[关闭]([removed] How

我想用一个文本框创建一个网页。当一个类型的国名在文本框中下面的文本框中的区域应显示该国的区号与国家名称一起。对于例如，如果有人类型的“英格兰”，在文本框，文本应某处下方的文本框中出现“国家：英格兰代码+ 44”，或者如果有人在文本框中输入“印度”，像“国家：印度代码：+91" 应该显示。

这可以在HTML中使用JavaScript，但不使用任何数据库，即纯粹使用JavaScript来实现？我的意思的JavaScript应匹配是基于JavaScript的本身的一些预定义的规则开始在文本框中输入与拨号代码国名和显示国家名称以及代码。

请帮我出的HTML代码和JavaScript的。

谢谢

Answer 1:

娄你可以对网页JavaScript的解决方案看。在实践中，这是不如何做到这一点的最好办法。然而，这仅仅是一个快速的想法...

代码示例

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

预习

这个修改，以适应您的需求。

或用相同的结果甚至是简单的版本是：

  // 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;
    }

实施例＃2

考虑以下代码

  // 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;
    }

注：我已经创建了flags在脚本目录目录，并把一些标志有用于测试目的。

预览＃2

干杯!

Answer 2:

使用自动完成与AJAX。下面是一个例子：

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

在本网站使用引导：

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

多在这个深度jQuery UI的解释：

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

Answer 3:

答案是：是的，它可以用JavaScript来完成。

现在，你需要考虑你要去哪里来存储信息。

你应该谷歌：JSON对象，并学会写一个。如果你担心它的呈现方式，你就必须寻找一些HTML和CSS。当你有一些代码，我们将帮助您微调吧:)

希望这可以帮助。