CODEWITHSUNDEEP
javascripthtml
MKT
MKT

Reputation: 11

Code to display capital of country and continent with javascript and html

I'm new to stackoverflow. I have written a code in html with javascript in it. The code displays a textbox in html and by typing names of countries, it helps us to find the capital of the country and its continent. Here is the code:

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

For example, if we type "u" in the textbox, it shows all the countries starting with "U" and as we go on typing the first few characters of the country name we get more specific countries. But in case of "United States of America" and other countries where there are two or more words in the name of the country, the above code does not work if we type only "states". Is there some way out with the above code with which we get the result "United States of America" by either typing "uni..." or "st..."?
Thank you

Upvotes: 1

Views: 6395

Answers (2)

Ben
Ben

Reputation: 57237

The trick is to use RegExp. Here's a rewrite and a cleanup with a few tips commented in.

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

Regex is a powerful topic. When coders say "powerful" they usually mean complex and headache-causing, but with amazing capabilities.

Regex is that, and it's fun and helpful once you get the hang of it. It's a great way to solve your question.

I leave you with a popular quote:

Some people, when confronted with a problem, think "I know, I'll use regular expressions." Now they have two problems.

Upvotes: 0

Thomas Harris
Thomas Harris

Reputation: 434

Why not use indexOf then you will find the word in any position instead of just the beginning.

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

this would be replacing

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

Upvotes: 1

Related Questions