{"id":54414,"date":"2021-12-29T03:01:03","date_gmt":"2021-12-28T17:01:03","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=54414"},"modified":"2021-12-28T08:38:10","modified_gmt":"2021-12-27T22:38:10","slug":"autocompletion-combobox-navigate-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/autocompletion-combobox-navigate-tutorial\/","title":{"rendered":"AutoCompletion ComboBox Navigate Tutorial"},"content":{"rendered":"
\"AutoCompletion<\/a>

AutoCompletion ComboBox Navigate Tutorial<\/p><\/div>\n

Today’s task on top of the proof of concept work of yesterday’s AutoCompletion ComboBox Primer Tutorial<\/a> is to get some meaningful functionality when clicking that “Test” button (which up until today you would describe as “Validation only” functionality). And so, today, should the user prime the web application with Wikipedia “List Of” data via that “.” link Javascript prompt access point, we turn that “Test” button into a “Navigate” button, whereby popup Wikipedia “List Of” windows can be opened via a PHP method=POST form navigation paradigm.<\/p>\n

Why navigate to the PHP helper? Well, it is the same reason as why we navigate via a form method=POST paradigm in wikiautocompletion.htm<\/a>‘s changed HTML parent<\/a> ]live run<\/a>. It is because large amounts of data are now needed to tag along with the navigation form, and so we add new form fields<\/font> as per (in their static initial HTML guise) …<\/p>\n


\n<form id=myform<\/font> onsubmit=\"return true;\" method=\"GET\" action=\"wikiautocompletion.htm\">
\n<table border=20>
\n<tr><th>Integer<\/th><th>Lowercase<\/th><th>Uppercase<\/th><\/tr>
\n<tr><td><\/td><td><\/td><td><\/td><\/tr>
\n<\/table><br>
\n<input type=hidden id=\"inavigate\" value=''><\/input>
\n<input type=hidden id=\"itable\" value=''><\/input>
\n<input type=hidden id=\"icontent\" value=''><\/input><\/font>
\n<input id=isubmit<\/font> type=submit value=Test><\/input>
\n<\/form>
\n<\/code><\/p>\n

… are initially set to not be populated nor “navigationally active” (where you need a name<\/i> attribute created, the job for ongoing Javascript code<\/font> work). We also give the HTML form an id<\/font>entity<\/font> so that ongoing Javascript code<\/font> work can change “validation only” method=”GET” action=”wikiautocompletion.htm”<\/i> to “navigation via PHP” method=”POST” action=”wikiautocompletion.php”<\/i> and give the HTML form’s submit button<\/font> an id<\/font>entity<\/font> in order to have ongoing Javascript code<\/font> work change “validation only” “Test” value (ie. label) to “navigation via PHP” “Navigate” value …<\/p>\n


\n function lookviapcontent() {
\n if (document.getElementById('viapcontent').innerHTML == '' && document.URL.indexOf('.php?') == -1<\/font>) {
\n setTimeout(lookviapcontent, 1000);
\n } else if (document.URL.indexOf('.php?') == -1)<\/font> {
\n divautoc=decodeURIComponent(document.getElementById('viapcontent').innerHTML);
\n divarr=divautoc.split('`');
\n divarr.sort();
\n divarru=divautoc.toUpperCase().split('`');
\n divarru.sort();
\n divarrl=divautoc.toLowerCase().split('`');
\n divarrl.sort();
\n document.getElementById('viapcontent').innerHTML='';
\n document.getElementById('viapcontent').innerHTML=divautoc.replace(\/\\`\/g,'
');
\n document.getElementById('viapcontent').style.position='fixed';
\n document.getElementById('viapcontent').style.left='40%';
\n document.getElementById('viapcontent').style.top='100px';
\n document.getElementById('viapcontent').style.display='block';
\n
\n if (document.getElementById('adot')) {
\n if (document.getElementById('adot').innerHTML != '.') {
\n if (document.getElementById('idot')) {
\n document.getElementById('idot').value=document.getElementById('adot').innerHTML.substring(0,eval(-1 + document.getElementById('adot').innerHTML.length)).replace(' regarding List Of ','');
\n } else {
\n document.getElementById('myform').innerHTML+='<input type=hidden name=idot id=idot value=\"' + document.getElementById('adot').innerHTML.substring(0,eval(-1 + document.getElementById('adot').innerHTML.length)).replace(' regarding List Of ','') + '\"><\/input>';
\n }
\n }
\n }
\n if (document.URL.indexOf('.php') != -1) {
\n document.getElementById('myform').method='POST';
\n document.getElementById('myform').action=document.URL.split('?')[0].split('#')[0].replace('.html','.php').replace('.htm','.php');
\n document.getElementById('itable').name='itable';
\n document.getElementById('icontent').name='icontent';
\n document.getElementById('icontent').value=divautoc;
\n document.getElementById('itable').value=btoa(document.getElementsByTagName('table')[0].outerHTML);
\n if (document.getElementById('inavigate')) {
\n document.getElementById('inavigate').name='inavigate';
\n }
\n }
\n if (document.getElementById('isubmit')) {
\n document.getElementById('isubmit').value='Navigate';
\n }<\/font>
\n setTimeout(mthen,5000);
\n }
\n }
\n<\/code><\/p>\n

… in wikiautocompletion.js<\/a>‘s changed external Javascript<\/a>, while the wikiautocompletion.php<\/a> PHP helper changes<\/a> as per<\/font> …<\/p>\n

<?php
\n
\n $fg=\"\";
\n $tablebit=\"\";
\n $scriptbit=\"\";
\n if (file_exists(\"wikiautocompletion.htm\")) {
\n $fg=file_get_contents(\"wikiautocompletion.htm\");
\n $tbs=explode(\"<\/table>\", $fg);
\n if (sizeof($tbs) > 1) {
\n $tablebit=\"<table\" . explode(\"<table\", $tbs[0])[1] . \"<\/table>\";
\n }
\n $sts=explode(\"<\/style>\", $fg);
\n if (sizeof($sts) > 1) {
\n $scriptbit=explode(\"<\/head>\", $sts[1])[0];
\n }
\n }
\n $newtablebit=explode(\"<tr\", $tablebit)[0] . \"<TR><\/TR><tr><\/tr>\" . \"<\/table>\";
\n

\n if ($fg != \"\" && isset($_POST['icontent']) && isset($_POST['itable'])) {
\n $newfg=str_replace(' id=\"itable\" value=', ' id=\"itable\" name=\"itable\" value=', str_replace(' id=\"icontent\" value=', ' id=\"icontent\" name=\"icontent\" value=', str_replace(' method=\"GET\" action=\"wikiautocompletion.htm\">', ' method=\"POST\" action=\"wikiautocompletion.php\">', str_replace(' method=\"GET\" action=\"wikiautocompletion.html\">', ' method=\"POST\" action=\"wikiautocompletion.php\">', str_replace('.js?ddlist=','.js?ddJUNKlist=',str_replace('<\/title>',' <\/title>',$fg))))));
\n $divbits=explode(\"<\/div>\", $fg);
\n $newfg=str_replace(\"<\/div>\" . $divbits[-1 + sizeof($divbits)], str_replace('+',' ',urldecode($_POST['icontent'])) . \"<\/div>\" . $divbits[-1 + sizeof($divbits)], $newfg);
\n $tblbits=explode(\"<\/table>\", $newfg);
\n $oldtable=\"<table \" . explode(\"<table \",$tblbits[0])[1] . \"<\/table>\";
\n $newfg=str_replace($oldtable, base64_decode($_POST['itable']), $newfg);
\n if (isset($_POST['inavigate'])) {
\n $tvalis='';
\n $thewiki=str_replace('+','_',str_replace(' ','_',urldecode($_POST['inavigate'])));
\n if (strpos($thewiki, '`') !== false) {
\n $tvalis=\" setsval('\" . explode('`',$thewiki)[1] . \"','\" . explode('`',str_replace('+',' ',urldecode($_POST['inavigate'])))[0] . \"'); \";
\n $thewiki=explode('`',$thewiki)[0];
\n }
\n if (isset($_POST['idot'])) {
\n $newfg=str_replace('>.<', '> regarding List Of ' . trim(str_replace('+',' ',urldecode($_POST['idot']))) . '.<', str_replace('<body', '<body onload=\" var sw=eval(screen.width \/ 2); ' . $tvalis . ' window.open(' . \"'\" . '\/\/en.wikipedia.org\/wiki\/' . $thewiki . \"','_blank','top=180,left=' + sw + ',width=' + sw + ',height=500'); \" . '\"', $newfg));
\n } else {
\n $newfg=str_replace('<body', '<body onload=\" var sw=eval(screen.width \/ 2); ' . $tvalis . ' window.open(' . \"'\" . '\/\/en.wikipedia.org\/wiki\/' . $thewiki . \"','_blank','top=180,left=' + sw + ',width=' + sw + ',height=500'); \" . '\"', $newfg);
\n }
\n }
\n echo $newfg;
\n exit;
\n }<\/font>
\n <\/code>
\n?><\/p>\n

\n

\n

Previous relevant AutoCompletion ComboBox Primer Tutorial<\/a> is shown below.<\/p>\n

\"AutoCompletion<\/a>

AutoCompletion ComboBox Primer Tutorial<\/p><\/div>\n

We have a desire to combine …<\/p>\n