1

我想创建一个带有文本框的网页。当在文本框中键入国家名称时，文本框下方的区域应显示该国家的拨号代码以及国家名称。例如，如果有人在文本框中键入“England”，文本框下方的某处应显示为“Country:England Code+44”，或者如果有人在文本框中输入“India”，例如“Country:India”应显示代码：+91"。

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

请帮助我处理 html 代码和 javascript。

谢谢

4

3 回答 3

3

您可以在下面看到页面上的 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在脚本的目录中创建了 dir 并在其中放置了一些标志用于测试目的。

预览 #2

在此处输入图像描述

干杯!

于 2012-10-26T21:48:22.970 回答
1

使用 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/
于 2012-10-26T21:15:06.830 回答
1

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

现在您需要考虑将这些信息存储在哪里。

你应该谷歌：JSON 对象并学会写一个。如果您担心它的呈现方式，则必须查找一些 HTML 和 CSS。当您获得一些代码时，我们将帮助您对其进行微调 :)

希望这可以帮助。

于 2012-10-26T21:15:15.540 回答