<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 curd='', curds=[], newcurd='';
var selval='';
var proposedu='';
var nurl='//www.names.org/n/';
var snurl='/about';
nurl='//www.behindthename.com/name/';
snurl='';
function getdelim(str) {
curd=decodeURIComponent(selval.split('&delim=')[1]);
curds=[];
newcurd=curd;
var dxmlhttp = new XMLHttpRequest();
dxmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
curds=this.responseText.split(curd);
if (eval('' + curds.length) <= 1 && this.responseText.indexOf('<td><a href="/wiki/') != -1) {
curd='<td><a href="/wiki/';
selval=selval.split('&delim=')[0] + '&delim=' + encodeURIComponent(curd);
curds=this.responseText.split(curd);
}
if (eval('' + curds.length) <= 1) {
newcurd=prompt('Enter a URL prefixing delimitation, presumably better than the suggestion, which was not found in the content.', curd);
if (newcurd == null) { newcurd=curd; }
if (newcurd.trim() != '' && newcurd != curd) { selval=selval.split('&delim=')[0] + '&delim=' + encodeURIComponent(newcurd); }
}
}
};
dxmlhttp.open("GET", str, true);
dxmlhttp.send();
}
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 (proposedu != '') {
dsug='<select style=background-color:yellow; title="Select 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(this.value.split(String.fromCharCode(32) + String.fromCharCode(40))[1].split(String.fromCharCode(41))[0].replace(/\ /g,String.fromCharCode(95)),' + "'_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 == '') {
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 Fruit 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 Vegetable 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 && proposedu == '') {
dsug=dsug.replace('</select>', '<option value="' + sugs[jsug] + '">' + sugs[jsug].replace(/\_/g,' ') + '</option></select>');
} else if (dsug.indexOf('>' + sugs[jsug] + '<') == -1 && proposedu != '') {
dsug=dsug.replace('</select>', '<option value="' + sugs[jsug] + '">' + sugs[jsug] + '</option></select>');
} else {
thr=thr.replace(', ' + sugs[jsug], '');
}
}
}
document.getElementById("dsug").innerHTML = dsug;
if (proposedu == '') {
document.getElementById("txtHint").innerHTML = fancyize(thr.replace(/\_/g,' '));
} else {
document.getElementById("txtHint").innerHTML = fancyize(thr);
}
}
};
xmlhttp.open("GET", "gethint.php?q=" + str + selval, true);
xmlhttp.send();
}
}
function fancyize(insc) {
var outinsc=insc + ', ';
var csvs=insc.split(', ');
for (var jj=eval(-1 + csvs.length); jj>=0; jj--) {
if (csvs[jj].toLowerCase().indexOf(' (http') != -1) {
outinsc=outinsc.replace(csvs[jj] + ', ', '<strong><font color=blue>' + csvs[jj].split(' (')[0] + '</font></strong><font size=1> (<a target=_blank href="' + csvs[jj].split(' (')[1].split(')')[0] + '">' + csvs[jj].split(' (')[1].split(')')[0].replace('HTTP:','http:') + '</a>)</font>, ');
} else if (csvs[jj].indexOf(' (') != -1) {
outinsc=outinsc.replace(csvs[jj] + ', ', '<strong><font color=blue>' + csvs[jj].split(' (')[0] + '</font></strong><font size=1> (' + csvs[jj].split(' (')[1].split(')')[0] + ')</font>, ');
} else {
outinsc=outinsc.replace(csvs[jj] + ', ', '<strong><font color=blue>' + csvs[jj] + '</font></strong>, ');
}
}
return outinsc.replace(/\,\ $/g,'');
}
function selvalit(selo) {
proposedu='';
document.getElementById('fname').value='';
document.getElementById('txtHint').innerHTML='';
if (selo.value.trim() == '') {
if (selo.value != '') {
proposedu=prompt('Please enter a "List of" type of URL eg. http://en.wikipedia.org/wiki/List_of_rivers', '');
if (proposedu == null) { proposedu=''; }
selval='&' + proposedu.split('/')[eval(-1 + proposedu.split('/').length)].split('?')[0].split('#')[0].replace(/\ /g,'_').replace('List_of_','') + '=' + encodeURIComponent(proposedu) + '&delim=' + encodeURIComponent('<li><a href="/wiki/');
document.getElementById('stopics').innerHTML+='<option value="' + proposedu.split('/')[eval(-1 + proposedu.split('/').length)].split('?')[0].split('#')[0].replace(/\ /g,'_').replace('List_of_','') + '" data-selval="' + selval + '">' + proposedu.split('/')[eval(-1 + proposedu.split('/').length)].split('?')[0].split('#')[0].replace(/\ /g,'_').replace('List_of_','').replace(/\_/g,' ').substring(0,1).toUpperCase() + proposedu.split('/')[eval(-1 + proposedu.split('/').length)].split('?')[0].split('#')[0].replace(/\ /g,'_').replace('List_of_','').replace(/\_/g,' ').substring(1) + '</option>';
document.getElementById('stopics').value=proposedu.split('/')[eval(-1 + proposedu.split('/').length)].split('?')[0].split('#')[0].replace(/\ /g,'_').replace('List_of_','');
getdelim(proposedu);
}
if (proposedu == '') {
selval=selo.value.trim();
}
} else if (document.getElementById('stopics').innerHTML.indexOf(' value="' + selo.value.trim() + '" data-selval="') != -1) {
selval=document.getElementById('stopics').innerHTML.split(' value="' + selo.value.trim() + '" data-selval="')[1].split('"')[0];
proposedu=decodeURIComponent(selval.substring(1).split('=')[1].split('&')[0]);
getdelim(proposedu);
} else {
selval='&' + selo.value.trim() + '=';
}
document.getElementById('fname').focus();
}
</script>
</head>
<body onload="if (window.self !== window.top) { selval=selval; } else { 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 id=stopics 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><option value=' '>Your own ...</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>