Question

我想创建一个带有文本框的网页。当在文本框中键入国家/地区名称时，文本框下方的区域应显示该国家/地区的拨号代码以及国家/地区名称。例如，如果有人在文本框中键入“英格兰”，则文本应显示在文本框下方某处“国家：英格兰代码+44”或者如果有人在文本框中输入“印度”，则类似“国家：印度”代码：应显示+91“。

可以使用javascript在html中完成，但不使用任何数据库，即。纯粹使用javascript？我的意思是javascript应该与在文本框中输入的国家名称匹配，基于javascript本身中的一些预定义规则的拨号代码，并显示国家名称和代码。

请帮我解决html代码以及javascript。

谢谢

Answer 1

Bellow你可以看到页面上的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>

预览

enter image description here

修改此内容以满足您的需求。

或者更简单的版本具有相同的结果：

  // 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 dir，并在那里放了一些标记用于测试目的。

预览＃2

enter image description here

干杯！

Answer 2

使用AJAX自动完成功能。这是一个例子：

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

并在此网站上使用Bootstrap：

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＆amp; CSS。当你得到一些代码时，我们会帮助你对它进行微调：）

希望这有帮助。

Javascript：如何根据在文本框中输入的国家/地区名称显示国家/地区代码

3 个答案:

代码示例

预览

示例＃2

预览＃2