{"id":54409,"date":"2021-12-28T03:01:39","date_gmt":"2021-12-27T17:01:39","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=54409"},"modified":"2021-12-27T07:46:33","modified_gmt":"2021-12-26T21:46:33","slug":"autocompletion-combobox-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/autocompletion-combobox-primer-tutorial\/","title":{"rendered":"AutoCompletion ComboBox Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wikiautocompletion.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"AutoCompletion ComboBox Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wikiautocompletion.jpg\" title=\"AutoCompletion ComboBox Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">AutoCompletion ComboBox Primer Tutorial<\/p><\/div>\n<p>We have a desire to combine &#8230;<\/p>\n<ul>\n<li>&#8220;ComboBox&#8221; ideas of <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/combobox-sort-tutorial\/' title='ComboBox Sort Tutorial'>ComboBox Sort Tutorial<\/a> &#8230; with &#8230;<\/li>\n<li>AutoCompletion ideas for text entry, in today&#8217;s case, within an HTML div contenteditable=true<\/li>\n<\/ul>\n<p> &#8230; and we&#8217;re just at a &#8220;proof of concept&#8221; stage of our journey today with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wikiautocompletion.html_GETME\">wikiautocompletion.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wikiautocompletion.html\" title=\"Click picture\">live run<\/a>&#8216;s use of  <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wikiautocompletion.js_GETME\">wikiautocompletion.js external Javascript<\/a> and <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/wikiautocompletion.php_GETME\">wikiautocompletion.php PHP<\/a> helpers.<\/p>\n<p>That PHP code called in an iframe populates the web application&#8217;s data that allows for AutoCompletion ideas regarding <a target=_blank title='CSS information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Cascading_Style_Sheets'>Wikipedia<\/a> &#8220;List Of&#8221; URL data <font color=blue>accessible via<\/font> &#8230;<\/p>\n<p><code><br \/>\n&lt;h1&gt;Wikipedia Autocompletion Table&lt;a onclick=\"<font color=blue>var alist=prompt('Enter a comma separated list of Topics to tabulate links in dropdown elements for.  Left spaces makes this work with existing table above.',''); if (alist == null) { alist=''; } if (alist != '') { if (alist.trim() != alist) { var divs=document.getElementsByTagName('div'); var sels=document.getElementsByTagName('select'); for (var isels=0; isels&lt;sels.length; isels++) {  sels[isels].innerHTML='';  divs[isels].setAttribute('data-dropinnards', encodeURIComponent(divs[isels].innerHTML));  } document.getElementById('viapiframe').src='.\/wikiautocompletion.php?topics=' + encodeURIComponent(alist.trim()) + '&viap=' + Math.floor(Math.random() * 198765434);  } else { location.href='.\/wikiautocompletion.php?topics=' + encodeURIComponent(alist.trim()); }  }<\/font> \" style=\"text-decoration:none;cursor:pointer;\" title=\"Your own list\"&gt;.&lt;\/a&gt;&lt;\/h1&gt;<br \/>\n&lt;div id=viapcontent style=display:none;&gt;&lt;\/div&gt;<br \/>\n&lt;iframe id=viapiframe style=display:none; src=&gt;&lt;\/iframe&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; and then, to act if Wikipedia data is established &#8230;<\/p>\n<p><code><br \/>\n  var divautoc='';<br \/>\n  var divarr=[], divarrl=[], divarru=[];<br \/>\n<br \/>\n  function lookviapcontent() {<br \/>\n   if (document.getElementById('viapcontent').innerHTML == '') {<br \/>\n    setTimeout(lookviapcontent, 1000);<br \/>\n   } else {<br \/>\n    divautoc=decodeURIComponent(document.getElementById('viapcontent').innerHTML);<br \/>\n    divarr=divautoc.split('`');<br \/>\n    divarr.sort();<br \/>\n    divarru=divautoc.toUpperCase().split('`');<br \/>\n    divarru.sort();<br \/>\n    divarrl=divautoc.toLowerCase().split('`');<br \/>\n    divarrl.sort();<br \/>\n    document.getElementById('viapcontent').innerHTML='';<br \/>\n    document.getElementById('viapcontent').innerHTML=divautoc.replace(\/\\`\/g,'&lt;br&gt;');<br \/>\n    document.getElementById('viapcontent').style.position='fixed';<br \/>\n    document.getElementById('viapcontent').style.left='50%';<br \/>\n    document.getElementById('viapcontent').style.top='100px';<br \/>\n    document.getElementById('viapcontent').style.display='block';<br \/>\n    setTimeout(mthen,5000);<br \/>\n   }<br \/>\n  }<br \/>\n<br \/> <br \/>\n  function mthen() {<br \/>\n    document.getElementById('viapcontent').innerHTML='';<br \/>\n  }<br \/>\n<br \/> <br \/>\n  setTimeout(lookviapcontent, 1000);<br \/>\n<\/code><\/p>\n<p> &#8230; and onkeydown and onkeypress (keyboard event) instigated &#8220;AutoCompletion&#8221; feeling Javascript code logics to populate a column of HTML button elements <\/p>\n<p><code><br \/>\nfunction xautoc(ato) {<br \/>\n  var wasc=String.fromCharCode(eval(eval('' + ato.keyCode)));<br \/>\n  lastdivo=ato.target;<br \/>\n  lastdivid='' + ato.target.id;<br \/>\n  var atoih=ato.target.innerHTML;<br \/>\n<br \/> <br \/>\n  if (atoih.indexOf('&lt;\/select&gt;') != -1 && divarr.length &gt; 0) {<br \/>\n    if (atoih.split('&lt;\/select&gt;')[1].trim() == '' && lastdivo.innerHTML.indexOf('ion id=') != -1) {<br \/>\n      lastdivo.innerHTML=lastdivo.innerHTML.replace(\/\\ion id\\=\/g, 'ion data-id=');<br \/>\n      lastdivo.setAttribute('data-dropinnards', encodeURIComponent(lastdivo.innerHTML));<br \/>\n      atoih=ato.target.innerHTML;<br \/>\n    }<br \/>\n  } else if (atoih.trim() == '' && divarr.length &gt; 0 && lastdivo.innerHTML.indexOf('ion id=') != -1) {<br \/>\n    lastdivo.innerHTML=lastdivo.innerHTML.replace(\/\\ion id\\=\/g, 'ion data-id=');<br \/>\n    lastdivo.setAttribute('data-dropinnards', encodeURIComponent(lastdivo.innerHTML));<br \/>\n    atoih=ato.target.innerHTML;<br \/>\n  }<br \/>\n<br \/> <br \/>\n  if ((atoih + wasc) != '' && divarr.length &gt; 0) { \/\/document.getElementById('viapcontent').innerHTML != '') {<br \/>\n    var found=false, foundlist='';<br \/>\n    for (var ij=0; ij&lt;divarr.length; ij++) {<br \/>\n    if (atoih.indexOf('&lt;\/select&gt;') != -1) {<br \/>\n      if (!found && divarr[ij].toUpperCase().indexOf((atoih.split('&lt;\/select&gt;')[1] + wasc).toUpperCase()) == 0) {<br \/>\n        found=true;<br \/>\n        foundlist=divarr[ij];<br \/>\n      } else if (found && divarr[ij].toUpperCase().indexOf((atoih.split('&lt;\/select&gt;')[1] + wasc).toUpperCase()) != 0) {<br \/>\n        foundlist=foundlist;<br \/>\n      } else if (found) {<br \/>\n        foundlist+='`' + divarr[ij];<br \/>\n      }<br \/>\n    } else {<br \/>\n      if (!found && divarr[ij].toUpperCase().indexOf((atoih + wasc).toUpperCase()) == 0) {<br \/>\n        found=true;<br \/>\n        foundlist='&lt;button onclick=\"atwo(' + \"'\" + lastdivid + \"'\" + ',' + \"'\" + divarr[ij] + \"'\" + ');\"&gt;' + divarr[ij] + '&lt;\/button&gt;';<br \/>\n      } else if (found && divarr[ij].toUpperCase().indexOf((atoih + wasc).toUpperCase()) != 0) {<br \/>\n        foundlist=foundlist;<br \/>\n      } else if (found && foundlist.indexOf('&lt;button onclick=\"atwo(' + \"'\" + lastdivid + \"'\" + ',' + \"'\" + divarr[ij] + \"'\" + ');\"&gt;' + divarr[ij] + '&lt;\/button&gt;') == -1) {<br \/>\n        foundlist+='`' + '&lt;button onclick=\"atwo(' + \"'\" + lastdivid + \"'\" + ',' + \"'\" + divarr[ij] + \"'\" + ');\"&gt;' + divarr[ij] + '&lt;\/button&gt;';<br \/>\n      }<br \/>\n    }<br \/>\n    }<br \/>\n    if (atoih.indexOf('&lt;\/select&gt;') != -1) {<br \/>\n    \/\/document.title=(' ' + wasc + ' Foundlist (via ' + atoih.split('&lt;\/select&gt;')[1] + wasc + ')=' + foundlist);<br \/>\n    document.getElementById('viapcontent').innerHTML=foundlist.replace(\/\\`\/g,'&lt;br&gt;');<br \/>\n    } else {<br \/>\n    \/\/document.title=(' ' + wasc + ' Foundlist (via ' + atoih + wasc + ')=' + foundlist);<br \/>\n    document.getElementById('viapcontent').innerHTML=foundlist.replace(\/\\`\/g,'&lt;br&gt;');<br \/>\n    }<br \/>\n  }<br \/>\n<br \/> <br \/>\n  return atoih;<br \/>\n}<br \/>\n<br \/> <br \/>\nfunction atwo(wk, wkv) {<br \/>\n if (document.getElementById('lastopt')) {<br \/>\n document.getElementById('lastopt').innerHTML=wkv;<br \/>\n document.getElementById('lastopt').value=wkv;<br \/>\n document.getElementById(wk).innerHTML=document.getElementById(wk).innerHTML.replace(\/\\ id\\=\/g, ' data-id=');<br \/>\n document.getElementById('viapcontent').innerHTML='';<br \/>\n document.getElementById(wk).setAttribute('data-dropinnards', encodeURIComponent(document.getElementById(wk).innerHTML));<br \/>\n } else {<br \/>\n document.getElementById(wk).innerHTML=wkv;<br \/>\n \/\/document.getElementById(wk).setAttribute('data-sofar',wkv);<br \/>\n \/\/alert((\"\" + document.getElementById(wk).onblur).split('}')[0].split('{')[1].replace(\/event\\.target\/g,\"document.getElementById('\" + wk + \"')\"));<br \/>\n eval((\"\" + document.getElementById(wk).onblur).split('}')[0].split('{')[1].replace(\/event\\.target\/g,\"document.getElementById('\" + wk + \"')\"));<br \/>\n \/\/eval((\"\" + document.getElementById(wk).onblur).split('}')[0].split('{')[1].replace(\/event\\.target\/g,\"document.getElementById('\" + wk + \"')\"));<br \/>\n \/\/document.getElementById(wk).click();<br \/>\n \/\/document.getElementById('iootw').focus();<br \/>\n \/\/document.getElementById(wk).setAttribute('data-dropinnards', encodeURIComponent(document.getElementById(wk).innerHTML));<br \/>\n document.getElementById('viapcontent').innerHTML='';<br \/>\n }<br \/>\n}<br \/>\n<br \/> <br \/>\nfunction autoc(ato) {<br \/>\n  var wasc=String.fromCharCode(eval(eval('' + ato.keyCode)));<br \/>\n  lastdivo=ato.target;<br \/>\n  lastdivid='' + ato.target.id;<br \/>\n  var atoih=ato.target.innerHTML;<br \/>\n<br \/> <br \/>\n  if (atoih.indexOf('&lt;\/select&gt;') != -1 && divarr.length &gt; 0) {<br \/>\n    if (atoih.split('&lt;\/select&gt;')[1].trim() == '' && lastdivo.innerHTML.indexOf('ion id=') != -1) {<br \/>\n      lastdivo.innerHTML=lastdivo.innerHTML.replace(\/\\ion id\\=\/g, 'ion data-id=');<br \/>\n      \/\/lastdivo.setAttribute('data-dropinnards', encodeURIComponent(lastdivo.innerHTML));<br \/>\n      atoih=ato.target.innerHTML;<br \/>\n    }<br \/>\n  } else if (atoih.trim() == '' && divarr.length &gt; 0 && lastdivo.innerHTML.indexOf('ion id=') != -1) {<br \/>\n    lastdivo.innerHTML=lastdivo.innerHTML.replace(\/\\ion id\\=\/g, 'ion data-id=');<br \/>\n    \/\/lastdivo.setAttribute('data-dropinnards', encodeURIComponent(lastdivo.innerHTML));<br \/>\n    atoih=ato.target.innerHTML;<br \/>\n  }<br \/>\n<br \/> <br \/>\n  if ((atoih + wasc) != '' && divarr.length &gt; 0) { \/\/document.getElementById('viapcontent').innerHTML != '') {<br \/>\n    var found=false, foundlist='';<br \/>\n    for (var ij=0; ij&lt;divarr.length; ij++) {<br \/>\n    if (atoih.indexOf('&lt;\/select&gt;') != -1) {<br \/>\n      if (!found && divarr[ij].toUpperCase().indexOf((atoih.split('&lt;\/select&gt;')[1] + wasc).toUpperCase()) == 0) {<br \/>\n        found=true;<br \/>\n        foundlist=divarr[ij];<br \/>\n      } else if (found && divarr[ij].toUpperCase().indexOf((atoih.split('&lt;\/select&gt;')[1] + wasc).toUpperCase()) != 0) {<br \/>\n        foundlist=foundlist;<br \/>\n      } else if (found) {<br \/>\n        foundlist+='`' + divarr[ij];<br \/>\n      }<br \/>\n    } else {<br \/>\n      if (!found && divarr[ij].toUpperCase().indexOf((atoih + wasc).toUpperCase()) == 0) {<br \/>\n        found=true;<br \/>\n        \/\/foundlist='&lt;button onclick=\"document.getElementById(' + \"'\" + lastdivid + \"'\" + ').innerHTML=' + \"'\" + divarr[ij] + \"'\" + ';   document.getElementById(' + \"'\" + lastdivid + \"'\" + ').setAttribute(' + \"'data-sofar'\" + ',' + \"'\" + divarr[ij] + \"'\" + '.replace(\/\\\\ \/g,\"|\"));  eval((\"\" + document.getElementById(' + \"'\" + lastdivid + \"'\" + ').onblur).replace(\/event\\.target\/g,\\\"document.getElementById(' + \"'\" + lastdivid + \"'\" + ')\\\"));\"&gt;' + divarr[ij] + '&lt;\/button&gt;';<br \/>\n        foundlist='&lt;button onclick=\"atwo(' + \"'\" + lastdivid + \"'\" + ',' + \"'\" + divarr[ij] + \"'\" + ');\"&gt;' + divarr[ij] + '&lt;\/button&gt;';<br \/>\n      } else if (found && divarr[ij].toUpperCase().indexOf((atoih + wasc).toUpperCase()) != 0) {<br \/>\n        foundlist=foundlist;<br \/>\n      } else if (found && foundlist.indexOf('&lt;button onclick=\"atwo(' + \"'\" + lastdivid + \"'\" + ',' + \"'\" + divarr[ij] + \"'\" + ');\"&gt;' + divarr[ij] + '&lt;\/button&gt;') == -1) {<br \/>\n        foundlist+='`' + '&lt;button onclick=\"atwo(' + \"'\" + lastdivid + \"'\" + ',' + \"'\" + divarr[ij] + \"'\" + ');\"&gt;' + divarr[ij] + '&lt;\/button&gt;';<br \/>\n      }<br \/>\n    }<br \/>\n    }<br \/>\n    if (atoih.indexOf('&lt;\/select&gt;') != -1) {<br \/>\n    \/\/document.title+=(' ' + wasc + ' foundlist (via ' + atoih.split('&lt;\/select&gt;')[1] + ')=' + foundlist);<br \/>\n    document.getElementById('viapcontent').innerHTML=foundlist.replace(\/\\`\/g,'&lt;br&gt;');<br \/>\n    } else {<br \/>\n    \/\/document.title+=(' ' + wasc + ' foundlist (via ' + atoih + wasc + ')=' + foundlist);<br \/>\n    document.getElementById('viapcontent').innerHTML=foundlist.replace(\/\\`\/g,'&lt;br&gt;');<br \/>\n    }<br \/>\n  }<br \/>\n<br \/> <br \/>\n  return atoih;<br \/>\n}<br \/>\n<\/code><\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d54409' onclick='var dv=document.getElementById(\"d54409\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/autocompletion\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d54409' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We have a desire to combine &#8230; &#8220;ComboBox&#8221; ideas of ComboBox Sort Tutorial &#8230; with &#8230; AutoCompletion ideas for text entry, in today&#8217;s case, within an HTML div contenteditable=true &#8230; and we&#8217;re just at a &#8220;proof of concept&#8221; stage of &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/autocompletion-combobox-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[1695,174,2928,2442,342,354,367,409,576,652,710,932,1866,1675,1431],"class_list":["post-54409","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-autocompletion","tag-button","tag-combobox","tag-contenteditable","tag-div","tag-dom","tag-dropdown","tag-external-javascript","tag-html","tag-javascript","tag-list","tag-php","tag-select","tag-textbox","tag-wikipedia"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/54409"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=54409"}],"version-history":[{"count":4,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/54409\/revisions"}],"predecessor-version":[{"id":54413,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/54409\/revisions\/54413"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=54409"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=54409"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=54409"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}