<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;
function showHint(str) {
var dsug="Suggestion";
var sugs=[];
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
if (this.responseText.replace('no suggestion', '') != '') {
sugs=this.responseText.split(', ');
dsug='<select style=background-color:yellow; title="Select a name for a Name lookup" id=ssug onchange="document.getElementById(' + "'fname'" + ').value=this.value; if (wo) { if (!wo.closed) { wo.close(); wo=null; } } wo=window.open(' + "'//www.names.org/n/' + encodeURIComponent(this.value.toLowerCase()) + '/about','_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++) {
dsug=dsug.replace('</select>', '<option value="' + sugs[jsug] + '">' + sugs[jsug] + '</option></select>');
}
}
document.getElementById("dsug").innerHTML = dsug;
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "gethint.php?q=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<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>
First name: <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>