Question

我是stackoverflow的新手。我用havascript编写了一个带有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 ...”获得结果“美国”？谢谢

Answer 1

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

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

这将取代

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

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

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

使用javascript和html显示国家和大陆的资本的代码

2 个答案: