用javascript和html显示国家和大陆首都的代码答案

【问题标题】：Code to display capital of country and continent with javascript and html用javascript和html显示国家和大陆首都的代码
【发布时间】：2013-11-01 07:17:32
【问题描述】：

我是 stackoverflow 的新手。我用 html 编写了一个带有 javascript 的代码。该代码以 html 格式显示一个文本框，通过输入国家/地区名称，它可以帮助我们找到该国的首都及其所在的大陆。代码如下：

<html>
<head>
<title>Test</title>
</head>
<body bgcolor="black" onload="document.getElementById('myedit').value=''">
<font color="white" size="4"><b>Please type the country name to find its capital and continent</b></font>
<br>
<input type="text" class="resizedTextbox" id="myedit" onchange="editChange()" onkeyup="editChange()" />
<div id="result">&nbsp;</div>
<script type="text/javascript">
// country,capital,continent
var cName = new Array();
cName[0] = 'Germany,Berlin,Europe';
cName[1] = 'United States of America,Washington DC,North America';
cName[2] = 'India,New Delhi,Asia';
cName[3] = 'United Kingdom,London,Europe';
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 != '') {
sp = cName[i].split(',');
res += '<table><tr><td><font color="white" size="5">'+sp[0]+', '+sp[2]+'&nbsp;&nbsp;'+sp[1]+'<font></td></tr></table>';
}
}
document.getElementById('result').innerHTML = res == '' ? '<font color="white" size="5"><i>&nbsp; Not found</i></font>' : res;
}
</script>
</body>
</html>

例如，如果我们在文本框中输入“u”，它会显示所有以“U”开头的国家，并且随着我们继续输入国家名称的前几个字符，我们会得到更具体的国家。但是如果是“美国”和其他国家名称中有两个或多个单词的国家，如果我们只输入“州”，上面的代码就不起作用。上面的代码有什么办法可以通过输入“uni...”或“st...”来得到结果“United States of America”吗？
谢谢

【问题讨论】：

为什么你不使用像Autocomplete这样的jQuery插件？
@RasoolGhafari - OP 想要了解具体细节。嗨 MKT 欢迎来到 SO。永远不要使用 <font> 标签 :) 它已被弃用（正在逐步淘汰）。
你可以使用 jquery autocomplete 来做到这一点，为什么要重新发明轮子
小伙想学怎么做，来吧。
做这样的任务很重要。否则，当您需要创建自定义并且您只知道 jQuery 时会发生什么。继续练习如何成为专家。

标签： javascript html

【解决方案1】：

为什么不使用 indexOf 那么你会在任何位置找到单词，而不仅仅是开头。

if(cName[i].toLowerCase().indexOf(s) != -1){
//your code
}

这将被替换

s2 = cName[i].toLowerCase().substr(0, s.length);
if (s2 == s && s != '') {

【讨论】：

谢谢托马斯。这行得通。但是当我删除我写的任何内容时，它会显示整个列表。相反，如果我们从文本框中删除所有文本时它什么都不显示，就像第一次加载页面时的样子一样，那不是更好吗？再次感谢。
喜欢这个？ if (s && cName[i].toLowerCase().indexOf(s) != -1) {（见上文）。
@Thomas 不错。 +1 易于使用，并且不退出正则表达式，特别是考虑到我的回答中的结束引号:)
刚刚注意到一件事。它正在寻找一切。不仅是国名，还有大陆和首都。我们可以将搜索限制在第一部分的文本中吗？我的意思是数组第一部分中列出的国家名称。例如：cName[1] = 'United States of America,Washington DC,North America';
为此，您可以在原始帖子中使用.split()，也许可以使用.substr()，但这会很难看，或者使用带有\w（单词边界）选项的正则表达式-我知道我继续插入正则表达式，但他们是未来，伙计，他们现在就在这里。哇哦。

【解决方案2】：

诀窍是使用RegExp。这是一个重写和清理，其中评论了一些提示。

<html><head><title>Test</title></head><body>

<b>Please type the country name to find its capital and continent</b>
<br>
<input type="text" class="resizedTextbox" id="myedit" />
<div id="result">&nbsp;</div>

<script type="text/javascript">

var cName = new Array();
cName[0] = 'Germany,Berlin,Europe';
cName[1] = 'United States of America,Washington DC,North America';
cName[2] = 'India,New Delhi,Asia';
cName[3] = 'United Kingdom,London,Europe';

function editChange() {
    // THIS keyword will usually be the object you're looking for 
    // (but careful, it's "powerful", see what I wrote later).
    var str = this.value.toLowerCase();

    // Make a new regex from the search string.
    var regex = new RegExp(str);

    // Store all results in an array so they're easy to work with later.
    var res = [];

    // Cache length so JS doesn't have to recalculate each time.
    var len = cName.length;

    for (i = 0; i < len; i++) {
        // Here's the trick - cName will look to see
        // if anything from inside the regex matches.
        // For example, /sta/ will be found in "united states"
        if (cName[i].toLowerCase().match(regex)) {
            res.push(cName[i]);
        }
    }

    // No need to make a new table for every entry...right?
    document.getElementById('result').innerHTML = res.join("<br>");
}

// Try to separate functionality from markup. Leave your HTML clean
// and put JS stuff in JS.  :)
document.getElementById('myedit').onkeyup = editChange;

</script>
</body>
</html>

正则表达式是一个强大的主题。当编码人员说“强大”时，它们通常意味着复杂且令人头疼，但具有惊人的功能。

正则表达式就是这样，一旦你掌握了它，它就会很有趣而且很有帮助。这是解决您的问题的好方法。

我留给你一个popular quote：

有些人在遇到问题时会想“我知道，我会用正则表达式。”现在他们有两个问题。

【讨论】：

嘿史蒂夫！感谢您提供的所有建议。下次我编写代码时，我一定会尝试实现它们。还有一件事。只需阅读我对托马斯回答的评论。希望你可以添加一些东西。谢谢
@MKT - 这很简单：if (s && cName[i].toLowerCase().indexOf(s) != -1) { 感谢您的反馈。我将不胜感激，但他的答案是 IMO 更好，更优雅。无论如何，一旦你清楚，请记住将答案标记为“已解决”。顺便说一句，有趣的问题。
试图对两个答案都投赞成票。但似乎我需要更多的声望才能投票给任何答案。