{"id":16500,"date":"2015-08-09T05:01:00","date_gmt":"2015-08-08T19:01:00","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=16500"},"modified":"2015-08-08T22:17:24","modified_gmt":"2015-08-08T12:17:24","slug":"wordpress-blog-search-within-search-overlay-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-blog-search-within-search-overlay-tutorial\/","title":{"rendered":"WordPress Blog Search Within Search Overlay Tutorial"},"content":{"rendered":"
\"WordPress<\/a>

WordPress Blog Search Within Search Overlay Tutorial<\/p><\/div>\n

Thought we were finished with “filter a search” (or “search within a search”) ideas yesterday … but how wrong were we? That wasn’t rhetorical.<\/p>\n

Okay … be like that. Anyway, we realised with today’s work continuing on from yesterday’s WordPress Blog Search Within Search Ajax Tutorial<\/a>, as shown below, that there is another “overlay” scenario we’d like to discuss (in our series of “overlay” blog postings<\/a>). It is the way that, even ignoring any “absolute” positioning of HTML elements you can still “overlay” elements merely by lining them up “inline”<\/a> but only turning on the visibility of any one of them at a time. So today’s scenario sees …<\/p>\n

    \n
  1. textbox (ie. HTML input<\/i><\/a> type=”text” element) for Search string … initially visible<\/li>\n
  2. dropdown (ie. HTML select<\/i><\/a> element) for list of Tags … initially invisible<\/li>\n
  3. dropdown (ie. HTML select<\/i><\/a> element) for list of Categories … initially invisible<\/li>\n<\/ol>\n

    … all lined up “relative”<\/a> to each other, with the invisibility, or not, controlled by the clicking of newly created a<\/i><\/a> tags where once there were only radio button labels … cutish huh?<\/p>\n

    Today’s “overlay” idea also illustrates another user experience (ux) ideal … an “ideal” in our books anyway … it goes like this, for us …<\/p>\n

    \nWhen there is an action that once involved definite use of both keyboard and mouse, if it can be arranged, even for just some user setting scenarios, that one or other of the keyboard or mouse is not needed, then this becomes an improved user experience.\n<\/p><\/blockquote>\n

    … and so, with the added dropdowns, it can become the case that you can do some sophisticated search operations involving the new Tag and Category scenarios, that don’t require any keyboard involvement … even if it is for less than half the scenarios, it is still worth doing, we feel.<\/p>\n

    We hope you find this “overlay” idea of some help, and will leave you with changes to the WordPress blog’s TwentyTen theme’s header.php in blue bold itallic<\/font><\/i><\/b> for today’s “overlay” changes and green bold itallic<\/font><\/i><\/b> for yesterday’s Ajax changes and red bold itallic<\/font><\/i><\/b> for the day before yesterday’s Preview changes and bold itallic<\/i><\/b> for the two days before yesterday’s Implementation changes and bold<\/b> for the three days before yesterday’s Primer (WordPress Blog Search Within a Search Primer Tutorial<\/a>) changes below …<\/p>\n


    \n
    \nvar spc=' ', cminus='-', fmtname='w411tform', fmcname='w411cform', edelim='\/', radis=\"\", formihis=\"\";<\/i><\/b>
    \nvar precwopen='', cwopen='', scmdis='', tcdelay=0, ourtcdelay=0, ourtcprefix='', tcprefix='', tcsuffix=' ... prefixes: @!@ just dropdown, @+@ additional dropdown, @|@ just open dropdown, @*@ additional open dropdown, @[secsDelay]@';
    \nvar iurlcnt=0, jurlcnt=0, urllist = new Array(), whenlist = new Array(), nextis=-1, optcol='yellow';<\/font>
    \n
    \nvar catselis=\"\", tagselis=\"\";
    \nfunction ovput(wois) {
    \n document.getElementById('s').style.display='none';
    \n if (wois.indexOf(\"ag\") != -1) {
    \n document.getElementById('tagselis').style.display='inline';
    \n } else {
    \n document.getElementById('catselis').style.display='inline';
    \n }
    \n}
    \nfunction ovsel(iov, iovval) {
    \n if (iovval.replace(' ') == '') {
    \n iov.style.display='none';
    \n document.getElementById('s').style.display='inline';
    \n } else {
    \n document.getElementById('s').value=iovval;
    \n iov.style.display='none';
    \n document.getElementById('s').style.display='inline';
    \n if (iov.id.indexOf(\"ag\") != -1) {
    \n radiocc('Tag');
    \n } else {
    \n radiocc('Category');
    \n }
    \n }
    \n}
    \n<\/font>
    \nfunction checkseltc() {
    \n var wqe=document.getElementById('seltc').innerHTML.split('value=');
    \n var zdelim=' ', zurllist;
    \n jurlcnt=eval(-1 + wqe.length);
    \n if (jurlcnt > 0) {
    \n for (var iyt=2; iyt<wqe.length; iyt++) {
    \n zdelim = wqe[iyt].substring(0,1);
    \n zurllist = wqe[iyt].substring(1).split(zdelim);
    \n urllist[eval(-2 + iyt)] = zurllist[0];
    \n if (iyt == 2) {
    \n whenlist[eval(-2 + iyt)] = tcdelay;
    \n } else {
    \n whenlist[eval(-2 + iyt)] = eval(tcdelay + eval(whenlist[eval(-3 + iyt)]));
    \n }
    \n if (nextis < 0) nextis = 0;
    \n }
    \n }
    \n document.getElementById('seltc').size = eval(-1 + wqe.length);
    \n iurlcnt++;
    \n if (nextis >= 0) {
    \n if (eval(nextis) < eval(whenlist.length)) {
    \n if (eval(iurlcnt) == whenlist[nextis]) {
    \n if (urllist[nextis] != \"\") tcwindowopen(urllist[nextis]);
    \n nextis++;
    \n if (eval(nextis) == eval(whenlist.length)) top.document.getElementById('seltc').style.display='block';
    \n }
    \n }
    \n }
    \n}
    \nfunction reprompt(insg) {
    \n tcprefix=\"\";
    \n if ((insg + \" \").substring(0,1) == \"@\") {
    \n var tcst=insg.substring(1).split(\"@\");
    \n if (tcst.length > 1) {
    \n tcprefix = tcst[0];
    \n insg=insg.replace(\"@\" + tcprefix + \"@\", \"\");
    \n if (tcprefix == \"!\") {
    \n document.getElementById(\"wrapper\").innerHTML = \"<iframe id='tciframe' width=1 height=1 style='width:1; height:1;' src='http:\/\/www.rjmprogramming.com.au\/About_Us.html'><\/iframe>\" + document.getElementById(\"wrapper\").innerHTML;
    \n } else if (tcprefix == \"|\") {
    \n document.getElementById(\"wrapper\").innerHTML = \"<iframe id='tciframe' width=1 height=1 style='width:1; height:1;' src='http:\/\/www.rjmprogramming.com.au\/About_Us.html'><\/iframe>\" + document.getElementById(\"wrapper\").innerHTML;
    \n } else if (tcprefix == \"+\") {
    \n document.getElementById(\"wrapper\").innerHTML = \"<iframe id='tciframe' width=1 height=1 style='width:1; height:1;' src='http:\/\/www.rjmprogramming.com.au\/About_Us.html'><\/iframe>\" + document.getElementById(\"wrapper\").innerHTML;
    \n } else if (tcprefix == \"*\") {
    \n document.getElementById(\"wrapper\").innerHTML = \"<iframe id='tciframe' width=1 height=1 style='width:1; height:1;' src='http:\/\/www.rjmprogramming.com.au\/About_Us.html'><\/iframe>\" + document.getElementById(\"wrapper\").innerHTML;
    \n } else if (tcprefix != \"\") {
    \n var tcd=tcprefix.split(\".\");
    \n tcdelay=eval(tcd[0]);
    \n document.getElementById(\"wrapper\").innerHTML = \"<iframe id='tciframe' width=1 height=1 style='width:1; height:1;' src='http:\/\/www.rjmprogramming.com.au\/About_Us.html'><\/iframe>\" + document.getElementById(\"wrapper\").innerHTML;
    \n tcprefix='';
    \n optcol='lightgreen';
    \n }
    \n }
    \n }
    \n return insg;
    \n}
    \nfunction reurl(inu) {
    \n var newinu;
    \n if (tcprefix != \"\") {
    \n if (tcprefix.substring(0,1) == '!' || tcprefix.substring(0,1) == '+' || tcprefix.substring(0,1) == '|' || tcprefix.substring(0,1) == '*') {
    \n newinu=inu.replace('window.open(', '').replace('location.href=', '').replace(';', '').replace(';', '').split(', \"_blank');
    \n document.getElementById('tciframe').src=eval(newinu[0]) + \"&tcprefix=\" + tcprefix;
    \n if (tcprefix.substring(0,1) == '|' || tcprefix.substring(0,1) == '*') setInterval(checkseltc, 1000);
    \n if (tcprefix.substring(0,1) == '!' || tcprefix.substring(0,1) == '|') {
    \n return \"\";
    \n }
    \n }
    \n inu = inu; \/\/.replace(\"wopenall\", \"tcprefix=\" + tcprefix + \"&wopenall\");
    \n }
    \n if (tcdelay != 0) {
    \n inu = inu; \/\/.replace(\"wopenall\", \"&tcdelay=\" + tcdelay + \"&wopenall\");
    \n newinu=inu.replace('window.open(', '').replace('location.href=', '').replace(';', '').replace(';', '').split(', \"_blank');
    \n document.getElementById('tciframe').src=eval(newinu[0]) + \"&tcdelay=\" + tcdelay;
    \n setInterval(checkseltc, 1000);
    \n return \"\";
    \n }
    \n return eval(inu);
    \n}<\/font><\/i><\/b>
    \nfunction preradiocc() {
    \n if (document.getElementById('s').value != \"\" && radis != \"\") {
    \n radiocc(radis);
    \n }
    \n}
    \nfunction radiocc(tvis) {
    \n var cok=1;
    \n cwopen=\"\";
    \n radis=tvis;
    \n <\/font>
    \n document.getElementById('tagselis').style.display='none';
    \n document.getElementById('catselis').style.display='none';
    \n document.getElementById('s').style.display='inline';
    \n <\/font>
    \n if (document.getElementById('s').value != \"\") {
    \n if (tvis == \"Search\") {
    \n document.getElementById('searchsubmit').click();
    \n } else if (tvis == \"Tag\") {
    \n cwopen=prompt(\"Please enter \" + document.getElementById('s').value + \" Tag findings Blog Posting Title search filter (blank causes no filtering\" + tcsuffix + \")\", document.getElementById('s').value);
    \n if (cwopen != null) {
    \n precwopen = document.getElementById(\"s\").value;<\/font>
    \n cwopen=reprompt(cwopen);
    \n if (document.getElementById('searchform').action.indexOf(\"\/wordpress\") != -1) {
    \n if (1 == 1) {
    \n reurl('window.open(document.getElementById(\"searchform\").action + \"?tag=\" + precwopen.toLowerCase().replace(\" \",\"-\").replace(\" \",\"-\").replace(\" \",\"-\").replace(\" \",\"-\").replace(\" \",\"-\") + \"&wopenall=\" + cwopen, \"_blank\");');<\/font>
    \n } else {
    \n reurl('location.href=document.getElementById(\"searchform\").action + \"?tag=\" + precwopen.toLowerCase().replace(\" \",\"-\").replace(\" \",\"-\").replace(\" \",\"-\").replace(\" \",\"-\").replace(\" \",\"-\") + \"&wopenall=\" + cwopen;');<\/font>
    \n }
    \n } else {
    \n if (1 == 1) {
    \n reurl('window.open(document.getElementById(\"searchform\").action + \"tag\/\" + precwopen.toLowerCase().replace(\" \",\"-\").replace(\" \",\"-\").replace(\" \",\"-\").replace(\" \",\"-\").replace(\" \",\"-\") + \"\/?wopenall=\" + cwopen, \"_blank\");');<\/font>
    \n } else {
    \n reurl('location.href=document.getElementById(\"searchform\").action + \"tag\/\" + precwopen.toLowerCase().replace(\" \",\"-\").replace(\" \",\"-\").replace(\" \",\"-\").replace(\" \",\"-\").replace(\" \",\"-\") + \"\/?wopenall=\" + cwopen;');<\/font>
    \n }
    \n }
    \n }
    \n } else if (tvis == \"Category\") {
    \n if (document.getElementById('searchform').action.indexOf(\"\/wordpress\") != -1) {
    \n if (document.getElementById('s').value.substring(0,1) >= '0' && document.getElementById('s').value.substring(0,1) <= '9') {
    \n cwopen=prompt(\"Please enter \" + document.getElementById('s').value + \" Category (number) findings Blog Posting Title search filter (blank causes no filtering\" + tcsuffix + \")\", \"Tutorial\");
    \n if (cwopen != null) {
    \n precwopen = document.getElementById(\"s\").value;<\/font>
    \n cwopen=reprompt(cwopen);
    \n if (1 == 1) {
    \n reurl('window.open(document.getElementById(\"searchform\").action + \"?cat=\" + precwopen.toLowerCase().replace(\" \",\"-\").replace(\" \",\"-\").replace(\" \",\"-\").replace(\" \",\"-\").replace(\" \",\"-\") + \"&wopenall=\" + cwopen, \"_blank\");');<\/font>
    \n } else {
    \n reurl('location.href=document.getElementById(\"searchform\").action + \"?cat=\" + precwopen.toLowerCase().replace(\" \",\"-\").replace(\" \",\"-\").replace(\" \",\"-\").replace(\" \",\"-\").replace(\" \",\"-\") + \"&wopenall=\" + cwopen;');<\/font>
    \n }
    \n }
    \n } else {
    \n cok=0;
    \n alert(\"Please enter the category as a number\");
    \n document.getElementById('s').value = '';
    \n }
    \n } else {
    \n cwopen=prompt(\"Please enter \" + document.getElementById('s').value + \" Category (alphabetic) findings Blog Posting Title search filter (blank causes no filtering\" + tcsuffix + \")\", document.getElementById('s').value);
    \n if (cwopen != null) {
    \n precwopen = document.getElementById(\"s\").value;<\/font>
    \n if (1 == 1) {
    \n reurl('window.open(document.getElementById(\"searchform\").action + \"category\/\" + precwopen.toLowerCase().replace(\" \",\"-\").replace(\" \",\"-\").replace(\" \",\"-\").replace(\" \",\"-\").replace(\" \",\"-\") + \"\/?wopenall=\" + cwopen, \"_blank\");');<\/font>
    \n } else {
    \n reurl('location.href=document.getElementById(\"searchform\").action + \"category\/\" + precwopen.toLowerCase().replace(\" \",\"-\").replace(\" \",\"-\").replace(\" \",\"-\").replace(\" \",\"-\").replace(\" \",\"-\") + \"\/?wopenall=\" + cwopen;');<\/font>
    \n }
    \n }
    \n }
    \n }
    \n if (cok == 1) {
    \n document.getElementById('s').value = '';
    \n radis=\"\";
    \n document.getElementById('searchform').innerHTML = formihis;
    \n document.getElementById('s').onblur = preradiocc;
    \n }
    \n }
    \n}<\/i>
    \nfunction preprecc(inidea) { \/\/ wopenallwas= form
    \n<?php
    \n $tblurbwas=\"\";
    \n if (isset($_GET['wopenallwas']) || isset($_GET['wopenall'])) {
    \n $tblurbwas = \" var ourwovwas=location.search.split(inidea + '=')[1] ? location.search.split(inidea + '=')[1].split('&')[0] : ' '; \\n\";
    \n $tblurbwas .= \" if (ourwovwas != ' ') { \\n\";
    \n $tblurbwas .= \" document.body.innerHTML = '<div id=\\\"verytop\\\" align=\\\"center\\\" style=\\\"background-color: yellow;\\\"><table cellpadding=25 cellspacing=25><tr><td style=\\\"border: 5px green solid; margin: 6 6 6 6;\\\"> WordPress 3.0.3<br><br><form action=\\\"http:\/\/www.rjmprogramming.com.au\/wordpress\/\\\" method=\\\"GET\\\"> Tag (alpha): <input type=\\\"text\\\" name=\\\"tag\\\" id=\\\"tag\\\" \/><br><br> Optional Search Blog Title for: <input type=\\\"text\\\" name=\\\"wopenall\\\" id=\\\"wopenall\\\" \/><br><br><br> <input type=\\\"submit\\\" value=\\\"Find Tag Blog Postings\\\" \/><\/form><br><br><br>' + '<form action=\\\"http:\/\/www.rjmprogramming.com.au\/wordpress\/\\\" method=\\\"GET\\\"> Category (numerical): <input type=\\\"number\\\" name=\\\"cat\\\" id=\\\"cat\\\" \/><br><br> Optional Search Blog Title for: <input type=\\\"text\\\" name=\\\"wopenall\\\" id=\\\"wopenall\\\" \/><br><br><br> <input type=\\\"submit\\\" value=\\\"Find Category Blog Postings\\\" \/><\/form><br><br><br><\/td><td style=\\\"border: 5px green solid; margin: 6 6 6 6;\\\"> WordPress 4.1.1<br><br><form id=\\\"w411tform\\\" action=\\\"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/\\\" method=\\\"GET\\\"> Tag (alpha): <input type=\\\"text\\\" onblur=\\\" document.getElementById(fmtname).action+=this.value.toLowerCase().replace(spc,cminus).replace(spc,cminus).replace(spc,cminus).replace(spc,cminus).replace(spc,cminus) + edelim; \\\" \/><br><br> Optional Search Blog Title for: <input type=\\\"text\\\" name=\\\"wopenall\\\" id=\\\"wopenall\\\" \/><br><br><br> <input type=\\\"submit\\\" value=\\\"Find Tag Blog Postings\\\" \/><\/form><br><br><br>' + '<form id=\\\"w411cform\\\" action=\\\"https:\/\/www.rjmprogramming.com.au\/ITblog\/category\/\\\" method=\\\"GET\\\"> Category (alpha): <input onblur=\\\" document.getElementById(fmcname).action+=this.value.toLowerCase().replace(spc,cminus).replace(spc,cminus).replace(spc,cminus).replace(spc,cminus).replace(spc,cminus) + edelim; \\\" type=\\\"text\\\" \/><br><br> Optional Search Blog Title for: <input type=\\\"text\\\" name=\\\"wopenall\\\" id=\\\"wopenall\\\" \/><br><br><br> <input type=\\\"submit\\\" value=\\\"Find Category Blog Postings\\\" \/><\/form><br><br><br><\/td><\/tr><\/table><\/div>' + document.body.innerHTML; \\n\";
    \n $tblurbwas .= \" } \\n\";
    \n }
    \n echo $tblurbwas;
    \n?>
    \n}<\/i><\/b>
    \nfunction tcwindowopen(inuis) {
    \n window.open(inuis, '_blank');
    \n}<\/i><\/b><\/font>
    \nfunction precc() { \/\/ wopenall= functionality
    \n preprecc('wopenallwas');
    \n document.getElementById('searchsubmit').style.display='none';
    \n var wbis=document.getElementById('searchform').action.indexOf(\"\/wordpress\");
    \n var taglist, catlist;
    \n var tagvar, tagvar2, catvar, catvar2;
    \n if (wbis != -1) {
    \n catvar=document.getElementById('categories-2').innerHTML.split(\"href=\");
    \n catvar2=document.getElementById('categories-2').innerHTML.split(\"title=\");
    \n } else {
    \n catvar=document.getElementById('categories-2').innerHTML.split(\"href=\");
    \n catvar2=document.getElementById('categories-2').innerHTML.split(\"href=\");
    \n }
    \n if (wbis != -1) {
    \n tagvar=document.getElementById('tag_cloud-3').innerHTML.split(\"href=\");
    \n tagvar2=document.getElementById('tag_cloud-3').innerHTML.split(\"title=\");
    \n } else {
    \n tagvar=document.getElementById('tag_cloud-2').innerHTML.split(\"href=\");
    \n tagvar2=document.getElementById('tag_cloud-2').innerHTML.split(\"title=\");
    \n }
    \n var sparea, thedelim=\"\", itc, tcval, tctitle;
    \n catselis=\"<select onchange='ovsel(this, this.value);' id='catselis' style='display:none;'><option value=' '>Categories below ...<\/option><option value=''>Not shown below ...<\/option><\/select>\";
    \n tagselis=\"<select onchange='ovsel(this, this.value);' id='tagselis' style='display:none;'><option value=' '>Popular Tags below ...<\/option><option value=''>Not shown below ...<\/option><\/select>\";
    \n for (itc=1; itc<catvar.length; itc++) {
    \n thedelim=catvar[itc].substring(0,1);
    \n tctitle=catvar2[itc].substring(1).replace(\">\",\"<\").split(\"<\");
    \n if (wbis != -1) {
    \n sparea=catvar[itc].substring(1).split(\"?cat=\");
    \n tcval=sparea[1].split(thedelim);
    \n } else {
    \n sparea=catvar[itc].substring(1).split(\"\/category\/\");
    \n tcval=sparea[1].split(\"\/\");
    \n }
    \n catselis=catselis.replace(\"<\/select>\", \"<option value='\" + tcval[0] + \"'>\" + tctitle[1] + \"<\/option><\/select>\");
    \n }
    \n for (itc=1; itc<tagvar.length; itc++) {
    \n thedelim=tagvar[itc].substring(0,1);
    \n tctitle=tagvar[itc].substring(1).replace(\">\",\"<\").split(\"<\");
    \n if (wbis != -1) {
    \n sparea=tagvar[itc].substring(1).split(\"?tag=\");
    \n tcval=sparea[1].split(thedelim);
    \n } else {
    \n sparea=tagvar[itc].substring(1).split(\"\/tag\/\");
    \n tcval=sparea[1].split(\"\/\");
    \n }
    \n tagselis=tagselis.replace(\"<\/select>\", \"<option value='\" + tcval[0] + \"'>\" + tctitle[1] + \"<\/option><\/select>\");
    \n }<\/font><\/i>
    \n formihis = document.getElementById('searchform').innerHTML.replace(\"<\/div>\", tagselis + catselis + <\/font><\/i>\"<input style='display:none;' type='radio' name='stype' value=''><input onclick=\\\"radiocc('Search');\\\" type='radio' name='stype' value='Search'>Search<input onclick=\\\"radiocc('Tag');\\\" type='radio' name='stype' value='Tag'><a onclick=\\\"ovput('Tag');\\\" title=\\\"Overlay Tag dropdown ...\\\" href=\\\"#tagselis\\\">Tag<\/a><\/font><\/i><input onclick=\\\"radiocc('Category');\\\" type='radio' name='stype' value='Category'><a onclick=\\\"ovput('Category');\\\" title=\\\"Overlay Category dropdown ...\\\" href=\\\"#catselis\\\">Category<\/a><\/font><\/i><select id='seltc' style='display:none;' onchange=\\\"window.open(this.value,'_blank');\\\" size='1'><option value=''>Blog Postings below ...<\/option><\/select><\/div>\");
    \n formihis = formihis.replace(\"input id\", \"input onblur='preradiocc();' id\");
    \n document.getElementById('searchform').innerHTML = formihis;
    \n document.getElementById('s').onblur = preradiocc;
    \n<?php
    \n $tblurb=\"\";
    \n if (isset($_GET['wopenall'])) {
    \n $tpage=1;
    \n $furl=\"\";
    \n $sru=explode(\"?\", $_SERVER['REQUEST_URI']);
    \n if (isset($_GET['paged'])) {
    \n $tpage=$_GET['paged'];
    \n $nurl = \"http:\/\/\" . $_SERVER['SERVER_NAME'] . \":\" . $_SERVER['SERVER_PORT'] . $sru[0] . \"?\" . str_replace(\"paged=\" . $tpage, \"paged=\" . ($tpage + 1), $_SERVER['QUERY_STRING']);
    \n $furl = \"http:\/\/\" . $_SERVER['SERVER_NAME'] . \":\" . $_SERVER['SERVER_PORT'] . $sru[0] . \"?\" . str_replace(\"paged=\" . $tpage, \"paged=1\", $_SERVER['QUERY_STRING']);
    \n } else if (isset($_GET['tag']) || isset($_GET['cat']) || isset($_GET['s'])) {
    \n $nurl = \"http:\/\/\" . $_SERVER['SERVER_NAME'] . \":\" . $_SERVER['SERVER_PORT'] . $sru[0] . \"?\" . $_SERVER['QUERY_STRING'] . \"&paged=2\";
    \n if (1 == 2) $furl = \"http:\/\/\" . $_SERVER['SERVER_NAME'] . \":\" . $_SERVER['SERVER_PORT'] . $sru[0] . \"?\" . $_SERVER['QUERY_STRING'] . \"&paged=1\";
    \n } else if (strpos(\"\/wordpress\/\", $_SERVER['REQUEST_URI']) !== false) {
    \n $nurl = \"http:\/\/\" . $_SERVER['SERVER_NAME'] . \":\" . $_SERVER['SERVER_PORT'] . $sru[0] . \"?\" . str_replace(\"wopenall=\", \"s=\", $_SERVER['QUERY_STRING']);
    \n $tblurb = \" location.href='\" . $nurl . \"'; \\n\";
    \n } else {
    \n $tstuff=explode(\"page\/\", $sru[0]);
    \n if (sizeof($tstuff) > 1) {
    \n $tstu=explode(\"\/\", $tstuff[1]);
    \n $tpage=$tstu[0];
    \n $nurl = \"http:\/\/\" . $_SERVER['SERVER_NAME'] . \":\" . $_SERVER['SERVER_PORT'] . str_replace(\"\/\" . $tpage, \"\/\" . ($tpage + 1), $sru[0]) . \"?\" . $_SERVER['QUERY_STRING'];
    \n $furl = \"http:\/\/\" . $_SERVER['SERVER_NAME'] . \":\" . $_SERVER['SERVER_PORT'] . str_replace(\"\/\" . $tpage, \"\/1\", $sru[0]) . \"?\" . $_SERVER['QUERY_STRING'];
    \n } else {
    \n $nurl = \"http:\/\/\" . $_SERVER['SERVER_NAME'] . \":\" . $_SERVER['SERVER_PORT'] . $sru[0] . \"\/page\/2\/\" . \"?\" . $_SERVER['QUERY_STRING'];
    \n if (1 == 2) $furl = \"http:\/\/\" . $_SERVER['SERVER_NAME'] . \":\" . $_SERVER['SERVER_PORT'] . $sru[0] . \"\/page\/1\/\" . \"?\" . $_SERVER['QUERY_STRING'];
    \n }
    \n }
    \n if ($tblurb == \"\") {
    \n $tblurb = \" ourtcprefix=location.search.split('tcprefix=')[1] ? location.search.split('tcprefix=')[1].split('&')[0] : ''; \\n\";
    \n $tblurb .= \" ourtcdelay=location.search.split('tcdelay=')[1] ? location.search.split('tcdelay=')[1].split('&')[0] : 0; \\n\";
    \n $tblurb .= <\/i><\/font>\" var ourwov=location.search.split('wopenall=')[1] ? location.search.split('wopenall=')[1].split('&')[0] : ' '; \\n\";
    \n $tblurb .= \" var ows, owstwo, iot, hl=1; \\n\";
    \n $tblurb .= \" if (ourwov != ' ') { \\n\";
    \n $tblurb .= \" var hones=docgetclass('entry-title', 'h1'); \\n\";
    \n $tblurb .= \" hl=hones.length; \\n\";
    \n $tblurb .= \" if (hones.length > 0) { \\n\";
    \n $tblurb .= \" for (iot=0; iot<hones.length; iot++) { \\n\";
    \n $tblurb .= \" if (hones[iot].innerHTML.indexOf('Not Found') != -1) hl=eval(-1 + hl); \\n\";
    \n $tblurb .= \" if (ourwov == '' || hones[iot].innerHTML.toLowerCase().indexOf(decodeURIComponent(ourwov.replace('+', '%20').replace('+', '%20').replace('+', '%20').replace('+', '%20').toLowerCase())) != -1) { \\n\";
    \n $tblurb .= \" ows=hones[iot].innerHTML.split('href='); \\n\";
    \n $tblurb .= \" if (ows.length > 1) { \\n\";
    \n $tblurb .= \" owstwo=ows[1].substring(1).split(ows[1].substring(0,1)); \\n\";
    \n $tblurb .= \" if ((ourtcprefix == '!' || tcprefix == '!') || (ourtcprefix == '|' || tcprefix == '|') || (ourtcprefix == '+' || tcprefix == '+') || (ourtcprefix == '*' || tcprefix == '*') || (ourtcprefix != '' || tcprefix != '') || (ourtcdelay != 0 || tcdelay != 0)) { if ((ourtcprefix == '!' || tcprefix == '!') || (ourtcprefix == '|' || tcprefix == '|') || (ourtcprefix == '+' || tcprefix == '+') || (ourtcprefix == '*' || tcprefix == '*')) { top.document.getElementById('seltc').style.display='block'; } else { optcol='lightgreen'; } top.document.getElementById('seltc').innerHTML += '<option <\/font><\/i><\/b>id=\\\"tco' + iot + '\\\" onmouseover=\\\"getSws(event);\\\" onmouseout=\\\"yehbut();\\\" ontouchstart=\\\"getSws(event);\\\" ontouchend=\\\"yehbut();\\\" title=\\\"... you can wait for the long hover functionality for a Blog Post Preview\\\" <\/font><\/i><\/b>style=\\\"background-color:' + optcol + ';\\\" value=\\\"' + owstwo[0] + '\\\">' + hones[iot].innerHTML + '<\/option>'; } else { window.open(owstwo[0], '_blank'); } \\n\";<\/font><\/i><\/b>
    \n $tblurb .= \" } \\n\";
    \n $tblurb .= \" } \\n\";
    \n $tblurb .= \" } \\n\";
    \n $tblurb .= \" hones=docgetclass('nav-previous', 'div'); \\n\";
    \n $tblurb .= \" if (hones.length > 0 && ((tcprefix == '!' || tcprefix == '+' || tcprefix == '|' || tcprefix == '*'))) { \\n\";
    \n if (strpos($nurl, \"\/page\/2\/\") !== false || strpos($nurl, \"paged=2\") !== false) {
    \n $tblurb .= \" location.href = '\" . $nurl . \"'; \\n\";
    \n } else {
    \n $tblurb .= \" location.href = '\" . $nurl . \"'; \\n\";
    \n }
    \n $tblurb .= \" } else <\/i><\/font>if (hones.length > 0) { \\n\";
    \n $tblurb .= \" location.href = '\" . $nurl . \"'; \\n\";
    \n $tblurb .= \" } else { \\n\";
    \n $tblurb .= \" preprecc('wopenall'); \\n\";
    \n $tblurb .= \" } \\n\";
    \n $tblurb .= \" } \\n\";
    \n if ($furl != \"\") $tblurb .= \" if (hl == 0) { \\n\";
    \n if ($furl != \"\") $tblurb .= \" location.href = '\" . str_replace(\"wopenall=\", \"wopenallwas=\", $furl) . \"'; \\n\";
    \n if ($furl != \"\") $tblurb .= \" } \\n\";
    \n $tblurb .= \" } \\n\";
    \n }
    \n echo $tblurb;
    \n }
    \n?>
    \n}
    \n<\/b>
    \n<\/script>
    \n<\/head>
    \n<body onload=\"precc();<\/b> courseCookies();\" <?php body_class(); ?>>
    \n<\/code><\/p>\n

    <\/i><\/b><\/font><\/p>\n

    \n

    Previous relevant WordPress Blog Search Within Search Ajax Tutorial<\/a> is shown below.<\/p>\n

    \"WordPress<\/a>

    WordPress Blog Search Within Search Ajax Tutorial<\/p><\/div>\n

    The last aspect to “filter a search” (or “search within a search”) ideas is to do with Ajax<\/a> functionality, because we discovered that, at least for non-mobile users, the onmouseover<\/i><\/a> and onmouseout<\/i><\/a> events work for the HTML option<\/i><\/a> tag within a select<\/i><\/a> (dropdown) tag, so that allows for the contextual help we last talked about with WordPress Blog Context Help Mode Toggler Primer Tutorial<\/a> to be included in the functionality here, and with the WordPress 4.1.1 WordPress Blog Search Within Search Ajax Tutorial<\/a>.<\/p>\n

    As we’ve mentioned before at this blog, Ajax techniques are useful to be able to perform more functionality without navigating to a new webpage, even, though, often, you are effectively accessing that new webpage. Today, we use Ajax for Preview purposes with that dropdown (HTML select<\/i>) element of yesterday’s WordPress Blog Search Within Search Preview Tutorial<\/a> as shown below.<\/p>\n

    Not everybody likes Ajax, and so we offer those users an “out”, in that you have to “hover” a long time to enact the Ajax functionality, so if you are hovering just to see the “title” wording of HTML elements, if you are fairly quick about it, the Ajax functionality will not happen.<\/p>\n

    So it pans out the WordPress blog’s TwentyTen theme’s header.php does not need to change much to do its bit as per the green bold itallic<\/font><\/i><\/b> below, modifying yesterday’s red bold itallic<\/font><\/i><\/b> …<\/p>\n


    \n...
    \n $tblurb .= \" if ((ourtcprefix == '!' || tcprefix == '!') || (ourtcprefix == '|' || tcprefix == '|') || (ourtcprefix == '+' || tcprefix == '+') || (ourtcprefix == '*' || tcprefix == '*') || (ourtcprefix != '' || tcprefix != '') || (ourtcdelay != 0 || tcdelay != 0)) { if ((ourtcprefix == '!' || tcprefix == '!') || (ourtcprefix == '|' || tcprefix == '|') || (ourtcprefix == '+' || tcprefix == '+') || (ourtcprefix == '*' || tcprefix == '*')) { top.document.getElementById('seltc').style.display='block'; } else { optcol='lightgreen'; } top.document.getElementById('seltc').innerHTML += '<option <\/font><\/i><\/b>id=\\\"tco' + iot + '\\\" onmouseover=\\\"getSws(event);\\\" onmouseout=\\\"yehbut();\\\" ontouchstart=\\\"getSws(event);\\\" ontouchend=\\\"yehbut();\\\" title=\\\"... you can wait for the long hover functionality for a Blog Post Preview\\\" <\/font><\/i><\/b>style=\\\"background-color:' + optcol + ';\\\" value=\\\"' + owstwo[0] + '\\\">' + hones[iot].innerHTML + '<\/option>'; } else { window.open(owstwo[0], '_blank'); } \\n\";<\/font><\/i><\/b>
    \n...
    \n<\/code><\/p>\n

    Maybe you remember our contextual help blog postings (last one being WordPress Blog Context Help Mode Toggler Primer Tutorial<\/a>), and how we have an external Javascript wajax.js<\/a> arrangement for Ajax related functionality. Well, it changed to accomodate this last idea in this way<\/a>. The mode of use of ignoring contextual help meant that nothing.js<\/a> changed in exactly the same manner.<\/p>\n

    \n

    Previous relevant WordPress Blog Search Within Search Preview Tutorial<\/a> is shown below.<\/p>\n

    \"WordPress<\/a>

    WordPress Blog Search Within Search Preview Tutorial<\/p><\/div>\n

    Yesterday’s “filter a search” (or “search within a search”) ideas of WordPress Blog Search Within Search Implementation Tutorial<\/a> as shown below, were improvements on the day before, but we feel as though the user lacks some controls that would be good on the functionality.<\/p>\n

    By that we mean that many windows may open without the chance for the user to review their findings. We think the user would feel more in control of things if it were possible for them to have a dropdown (HTML select<\/a>) element that can review the findings, and then they can pick or choose what is interesting … after all, with yesterday’s scenario, they are not told what the resultant blog posting titles are ahead of having them come up in a new web browser tab already displayed, so, today, as an optionally available extra piece of functionality we allow in the Javascript Prompt window<\/a> the additional prefixes of …<\/p>\n