1

テキストボックスのあるWebページを作りたいです。テキスト ボックスに国名を入力すると、テキスト ボックスの下の領域に、その国のダイヤル コードと国名が表示されます。たとえば、誰かがテキスト ボックスに「England」と入力すると、テキスト ボックスの下のどこかに「Country:England Code+44」のようにテキストが表示されます。または、誰かがテキスト ボックスに「India」と入力すると、「Country:India」のようになります。 Code:+91」と表示されるはずです。

これは、javascript を使用して html で行うことができますが、データベースを使用せずに、つまり純粋に 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;
    }

注：スクリプトのディレクトリにdirを作成flagsし、テスト用にいくつかのフラグを配置しました。

プレビュー＃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 に答える