<html>
<head>
<title>Ajax PHP Example Supervisor ... thanks to https://www.w3schools.com/xml/ajax_php.asp - RJM Programming - November, 2022</title>
<script>
var wo=null;
var selval='';
var nurl='//www.names.org/n/';
var snurl='/about';
nurl='//www.behindthename.com/name/';
snurl='';
function showHint(str) {
var dsug="Suggestion";
var sugs=[];
var thr='';
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
thr=this.responseText;
if (this.responseText.replace('no suggestion', '') != '') {
sugs=this.responseText.split(', ');
if (selval == '') {
dsug='<select style=background-color:yellow; title="Select a name for a Name lookup" id=ssug onchange="document.getElementById(' + "'fname'" + ').value=this.value.replace(/\_/g,String.fromCharCode(32)); if (wo) { if (!wo.closed) { wo.close(); wo=null; } } wo=window.open(' + "'' + nurl + encodeURIComponent(this.value.toLowerCase()) + snurl,'_blank','top=" + eval(screen.height * 0.2) + ",left=" + eval(screen.width * 0.5) + ",width=" + eval(screen.width * 0.5) + ",height=" + eval(screen.height * 0.7) + "');" + ' this.value=' + "''" + ';"><option value=' + "''" + '>Suggestion</option></select>';
} else if (selval == '&capitals=') { // https://en.wikipedia.org/wiki/
dsug='<select style=background-color:yellow; title="Select a Capital for a National capital lookup" id=ssug onchange="document.getElementById(' + "'fname'" + ').value=this.value.replace(/\_/g,String.fromCharCode(32)); if (wo) { if (!wo.closed) { wo.close(); wo=null; } } wo=window.open(' + "'//en.wikipedia.org/wiki/' + encodeURIComponent(this.value.split(' (')[0].replace(/\ /g,'_')) + '','_blank','top=" + eval(screen.height * 0.2) + ",left=" + eval(screen.width * 0.5) + ",width=" + eval(screen.width * 0.5) + ",height=" + eval(screen.height * 0.7) + "');" + ' this.value=' + "''" + ';"><option value=' + "''" + '>Suggestion</option></select>';
} else if (selval == '&hobbies=') { // https://en.wikipedia.org/wiki/
dsug='<select style=background-color:yellow; title="Select a Hobby to lookup" id=ssug onchange="document.getElementById(' + "'fname'" + ').value=this.value.replace(/\_/g,String.fromCharCode(32)); if (wo) { if (!wo.closed) { wo.close(); wo=null; } } wo=window.open(' + "'//en.wikipedia.org/wiki/' + encodeURIComponent(this.value.split(' (')[0].replace(/\ /g,'_')) + '','_blank','top=" + eval(screen.height * 0.2) + ",left=" + eval(screen.width * 0.5) + ",width=" + eval(screen.width * 0.5) + ",height=" + eval(screen.height * 0.7) + "');" + ' this.value=' + "''" + ';"><option value=' + "''" + '>Suggestion</option></select>';
} else if (selval == '&fruits=') { // https://en.wikipedia.org/wiki/
dsug='<select style=background-color:yellow; title="Select a Hobby to lookup" id=ssug onchange="document.getElementById(' + "'fname'" + ').value=this.value.replace(/\_/g,String.fromCharCode(32)); if (wo) { if (!wo.closed) { wo.close(); wo=null; } } wo=window.open(' + "'//simple.wikipedia.org/wiki/' + encodeURIComponent(this.value.replace(/\ /g,'_')) + '','_blank','top=" + eval(screen.height * 0.2) + ",left=" + eval(screen.width * 0.5) + ",width=" + eval(screen.width * 0.5) + ",height=" + eval(screen.height * 0.7) + "');" + ' this.value=' + "''" + ';"><option value=' + "''" + '>Suggestion</option></select>';
} else if (selval == '&vegetables=') { // https://en.wikipedia.org/wiki/
dsug='<select style=background-color:yellow; title="Select a Hobby to lookup" id=ssug onchange="document.getElementById(' + "'fname'" + ').value=this.value.replace(/\_/g,String.fromCharCode(32)); if (wo) { if (!wo.closed) { wo.close(); wo=null; } } wo=window.open(' + "'//simple.wikipedia.org/wiki/' + encodeURIComponent(this.value.replace(/\ /g,'_')) + '','_blank','top=" + eval(screen.height * 0.2) + ",left=" + eval(screen.width * 0.5) + ",width=" + eval(screen.width * 0.5) + ",height=" + eval(screen.height * 0.7) + "');" + ' this.value=' + "''" + ';"><option value=' + "''" + '>Suggestion</option></select>';
}
for (var jsug=0; jsug<sugs.length; jsug++) {
if (dsug.indexOf('>' + sugs[jsug].replace(/\_/g,' ') + '<') == -1) {
dsug=dsug.replace('</select>', '<option value="' + sugs[jsug] + '">' + sugs[jsug].replace(/\_/g,' ') + '</option></select>');
} else {
thr=thr.replace(', ' + sugs[jsug], '');
}
}
}
document.getElementById("dsug").innerHTML = dsug;
document.getElementById("txtHint").innerHTML = thr.replace(/\_/g,' ');
}
};
xmlhttp.open("GET", "gethint.php?q=" + str + selval, true);
xmlhttp.send();
}
}
function selvalit(selo) {
document.getElementById('fname').value='';
document.getElementById('txtHint').innerHTML='';
if (selo.value.trim() == '') {
selval=selo.value.trim();
} else {
selval='&' + selo.value.trim() + '=';
}
document.getElementById('fname').focus();
}
</script>
</head>
<body onload="document.getElementById('fname').focus();">
<h2>Name Selector ... Largely based on <a target=_blank title='https://www.w3schools.com/xml/ajax_php.asp' href='https://www.w3schools.com/xml/ajax_php.asp'>AJAX PHP Example</a>, thanks ...</h2>
<h3>With /usr/share/dict/propernames intervention</h3>
<h4>RJM Programming - November, 2022</h4>
<p><b>Start typing a name in the input field below:</b></p>
<form>
<select onchange=selvalit(this); style=display:inline-block;><option value=''>First name</option><option value='capitals'>National capital</option><option value='hobbies'>Hobby</option><option value='fruits'>Fruit</option><option value='vegetables'>Vegetable</option></select><span style=display:inline-block;>: </span><input id=fname type="text" onkeyup="showHint(this.value)">
</form>
<p><div id=dsug style=display:inline-block;vertical-align:top;>Suggestions</div><span style=display:inline-block;vertical-align:top;>: </span><span id="txtHint" style=display:inline-block;width:40%;word-wrap:break-word;></span></p>
</body>
</html>