<!doctype html>
<html>
<head>
<title>Weather Auto-completion Ajax Primer Tutorial - RJM Programming, January, 2017 - Thanks to http://</title>
<style>
body, #myWeatherSearchField {
font: 1.2em verdana, arial, helvetica, sans-serif;
}
.mysuggestions {
background-color: #ffffff;
padding: 2px 6px;
border: 1px solid #000000;
}
.mysuggestions:hover {
background-color: #69F69F;
}
.myWeatherSearchField.myerror {
background-color: #FFCFFC;
}
</style>
<script type="text/javascript">
var winos=[], prewinos=[];
function doweathers() {
for (var j=1; j<=prewinos.length; j++) {
winos.push(null);
winos[eval(-1 + winos.length)]=window.open(prewinos[eval(-1 + j)],'_blank','top=500,left=' + eval(eval(-1 + winos.length) * 300) + ',width=300,height=400');
}
prewinos=[];
}
function finalchoice(osel) {
var j=1, tz='', lat='', long='', tll, iso='', cplace='', prefix='', suffix='', blurb='You selected ';
for (var i=0; i<osel.length; i++) {
if (osel.options[i].selected) {
tll=('' + osel.options[i].title).split(',');
tz='' + tll[0];
lat='' + tll[1];
long='' + tll[2];
iso=('' + tll[3]).replace('undefined','');
//alert(osel.options[i].title);
cplace='' + osel.options[i].text;
if (j == 1) {
document.getElementById("jsondata").innerHTML="";
document.getElementById("myWeatherSearchField").value=osel.options[i].text;
if (winos.length > 0) {
for (var iwinos=0; iwinos<winos.length; iwinos++) {
winos[iwinos].close();
winos[iwinos]=null;
}
winos=[];
prewinos=[];
}
blurb+=cplace;
} else {
blurb+=' and ' + cplace;
}
prewinos.push("https://www.wunderground.com" + osel.options[i].value);
document.getElementById("jsondata").innerHTML+='<input type=hidden id=weather' + j + ' value="' + "window.open('https://www.wunderground.com" + osel.options[i].value + "','_blank','top=500,left=" + eval(eval(-1 + winos.length) * 300) + ",width=300,height=400')" + '"></input>';
if (prefix == '') prefix='http://www.rjmprogramming.com.au/PHP/tz_places.php?x=x';
prefix += '&wlink' + suffix + '=' + encodeURIComponent("https://www.wunderground.com" + osel.options[i].value) + '&iso' + suffix + '=' + iso + '&lat' + suffix + '=' + encodeURIComponent(lat) + '&long' + suffix + '=' + encodeURIComponent(long) + '&place' + suffix + '=' + encodeURIComponent(cplace) + '&tzname' + suffix + '=' + encodeURIComponent(tz) + '&iam' + suffix + '=' + j;
j++;
suffix='' + j;
}
if (j > 1) {
osel.options[0].text=blurb;
osel.size=1;
setTimeout(doweathers,5000);
}
}
if (prefix != '') {
//alert(prefix);
// window.open(prefix,'_blank','top=50,left=50,width=400,height=400');
document.getElementById("mytz").style.display="block";
document.getElementById("mytz").src=prefix.replace('?x=x&','?');
//document.getElementById("myWeatherSearchField").focus();
}
}
function prewbit() {
var x = document.getElementById("myWeatherSearchField").value;
if (x.length >= 3) {
document.getElementById("myselcont").size=8;
document.getElementById("myselcont").style.display="inline";
document.getElementById("mybut").style.display="inline";
//alert('using_key.php?theseparameters=aq%3Fquery%3D' + encodeURIComponent(x));
document.getElementById('mygi').src=document.URL.split('autocomplete.')[0] + 'using_key.php?theseparameters=aq%3Fquery%3D' + encodeURIComponent(x);
}
}
</script>
</head>
<body onload="document.getElementById('myWeatherSearchField').focus();">
<h1>Weather API Project</h1>
<h4>RJM Programming, January, 2017</h4>
<h4>Powered by Weather Undergound</h4>
<form action="#" style="margin-top:-30px;">
Please enter your location or hurricane name: <input style="background-color:pink;" type="text" name="myWeatherSearchField" id="myWeatherSearchField" autocomplete="off" onblur="prewbit();" onkeyup="prewbit();" /> <select style="display:none;background-color:yellow;" id='myselcont' size=8 multiple></select> <input id='mybut' type=button onclick="finalchoice(document.getElementById('myselcont'));" value="Ready?" style="display:none;background-color:orange;"></input> <br>
<br><br>
<a target=_blank title='Powered by Weather Underground' href='https://www.wunderground.com/?apiref=115debbc3a1e87e1'><img src='wulogo.JPG' title='Powered by Weather Underground'></img></a>
<br>
</form>
<div id='jsondata'></div>
<iframe id='mygi' src='about:blank' style='display:none;width:100%;height:550px;'></iframe>
<iframe id='mytz' src='about:blank' style='display:none;width:100%;height:850px;'></iframe>
</body>
</html>