1

我是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”的结果吗？
谢谢

4

2 回答 2

1

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

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

这将取代

s2 = cName[i].toLowerCase().substr(0, s.length);
if (s2 == s && s != '') {
于 2013-11-01T07:37:10.217 回答
0

诀窍是使用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>

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

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

我给你留下一句流行的话：

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

于 2013-11-01T07:39:06.633 回答