Code for Search Bar

zoomwaffles · Oct 16, 2008

I'd like to add a very simple search bar that would mimic the Ctrl+F function (i.e. search the current page for a specific word). I don't want something that searches the entire website or that navigates away from the current page. I only want it to highlight each instance of the word for which the user searches, just as the Ctrl+F function would on a PC.

Is there something as simple as that?

Thanks.

PC-XT · Oct 28, 2008

Which OS and browser are you using?

zoomwaffles · Oct 29, 2008

Vista and the newest iexplorer

PC-XT · Nov 3, 2008

IE uses Ctrl+F to search the current page. As for toolbars, here is an article about the IE "Toolbar Wars" which has ads at the bottom in the comments section for tools to make custom toolbars: http://www.windowsdevcenter.com/pub/a/windows/2004/08/31/Toolbar.html
There is also an ad for Quero that says it allows a search of the current page. Quero is on http://www.snapfiles.com/get/quero.html and http://www.bestsoftware4download.com/software/t-free-quero-toolbar-download-vkfnvyxw.html

I also found this one in google: http://www.aimingtech.com/aimatsite/home.htm, but don't know if it supports Vista yet. It's also on some download sites like brothersoft.

I haven't tried any of these myself. I don't know the developing companies, either. These are just what seem to be the best I've found so far. Good luck.

zoomwaffles · Nov 4, 2008

No see I'm looking for something that would go directly onto my website. Rather than a toolbar on my own computer, I want something that can be used by visitors to my site to search the page - something built directly into the code, rather than installed on their PCs.

Thanks!

PC-XT · Nov 6, 2008

OIC

I made the following code as an example of something like that:

Code:

<html><head><title>Find on this page</title>
<script language=JavaScript type=text/javascript><!--
docbak=0;
function docfind(Q){if(docbak===0)docbak=document.body.innerHTML;
 var i,j,t,q=Q.split(" "),b=docbak,s="You have searched this page for the following words:",g=[["black","#ff66ff"],["black","#ffff66"],["black","#99ff99"],["black","#ff9999"],["white","blue"],["white","green"],["white","black"]];
 for(j=0;j<q.length;j++)s+=' <b style="color:'+g[t=j%g.length][0]+';background-color:'+g[t][1]+'">'+q[j]+'</b>';
 s+="<hr>";
 for(i=0;i<b.length;i++){
  if((t=b.substring(i,i+1))=="<")j=-1;
  else if(j>-1||t==">")for(j=0;j<q.length;j++)if(b.substring(i,i+q[j].length)==q[j]){s+='<b style="color:'+g[t=j%g.length][0]+';background-color:'+g[t][1]+'">'+q[j]+'</b>';i+=q[j].length-1;t=-1;break;}
  if(t!==-1)s+=t;
 }
 document.body.innerHTML=s;
}
//--></script>
</head><body><h1>Find on this page</h1>
<table border><tr><td rowspan=2>
This is example text to try searching. This could be the main body text. All text is searched, even the form itself.
<td><form name=f><input type=text name=q><input type=button value=Search onclick="docfind(document.f.q.value)"></form>
<tr><td>This could be ads or index or contents bar or whatever. This text is also searched.
</body></html>

If that is not exactly what you want, I could make changes.

PC-XT · Nov 6, 2008

BTW, I should mention that that example will match parts of words as well as whole words. I also forgot to make it case insensitive. Here is a better example:

Code:

<html><head><title>Find on this page</title>
<script language=JavaScript type=text/javascript><!--
docbak=0;
function docfind(Q,w,c){if(Q=="")return;if(docbak===0)docbak=document.body.innerHTML;if(typeof w=="undefined")w=true;
 var i,j,t,T,C=" <>{}[](),.!?/;:*=+-_`'"+'"',q=Q.split(" "),b=docbak,s="The following words have been highlighted:",g=[["black","#ff66ff"],["black","#ffff66"],["black","#99ff99"],["black","#ff9999"],["white","blue"],["white","green"],["white","black"]];
 for(j=0;j<q.length;j++){
  s+=' <b style="color:'+g[t=j%g.length][0]+';background-color:'+g[t][1]+'">'+q[j]+'</b>';
  if(c)q[j]=q[j].toLowerCase();
 }s+="<hr>";
 for(i=0;i<b.length;i++){
  if((t=b.substring(i,i+1))=="<")j=-1;
  else if(j>-1||t==">")for(j=0;j<q.length;j++){
   T=b.substring(i,i+q[j].length);if(c)T=T.toLowerCase();
   if(T==q[j]&&(!w||(C.indexOf(b.substring(i-1,i)))>-1&&C.indexOf(b.substring(i+q[j].length,i+q[j].length+1))>-1)){s+='<b style="color:'+g[t=j%g.length][0]+';background-color:'+g[t][1]+'">'+T+'</b>';i+=q[j].length-1;t=-1;break;}
  }if(t!==-1)s+=t;
 }
 document.body.innerHTML=s;
}
//--></script>
</head><body><h1>Find on this page</h1>
<table border><tr><td rowspan=2>
This is example text to try searching. This could be the main body text. All text is searched, even the form itself.
<p>The search can now be case-insensitive, which means it will find upper and lower case words, or case sensitive, finding only the exact upper and lower case letters as you enter.
<p>The search can also find whole words or also include word parts by unchecking the <b>Whole words only</b> checkbox.
<td><form name=f><input type=text name=q><input type=button value=Search onclick="docfind(tq=document.f.q.value,tw=document.f.w.checked,tc=document.f.c.checked);document.f.q.value=tq;document.f.w.checked=tw;document.f.c.checked=tc;"><br><input type=checkbox name=w checked>Whole words only<br><input type=checkbox name=c>Match case</form>
<tr><td>This could be ads or index or contents bar or whatever. This text is also searched.
</body></html>

zoomwaffles · Nov 7, 2008

now we're getting close. in the latter example, even when match case remains unselected, it still appears to require exact case matching. Also, the frames have shifted the body of my text off to the right a bit. here's a look...

http://www.freewebs.com/hockeyutopia/linecombinations.htm

As you can see, the goal is for someone to be able to search for a player's name, and have it highlight that name.

Thanks!

PC-XT · Nov 8, 2008

Sorry about the Match case error. Here is the improved code:

Code:

<html><head><title>Find on this page</title>
<script language=JavaScript type=text/javascript><!--
docbak=0;
function docfind(Q,w,c){if(Q=="")return;if(docbak===0)docbak=document.body.innerHTML;if(typeof w=="undefined")w=true;
 var i,j,t,T,C=" <>{}[](),.!?/;:*=+-_`'"+'"',q=Q.split(" "),b=docbak,s="",r="The following words have been highlighted:",g=[["black","#ff66ff"],["black","#ffff66"],["black","#99ff99"],["black","#ff9999"],["white","blue"],["white","green"],["white","black"]];
 for(j=0;j<q.length;j++){
  r+=' <b style="color:'+g[t=j%g.length][0]+';background-color:'+g[t][1]+'">'+q[j]+'</b>';
  if(!c)q[j]=q[j].toLowerCase();
 }
 for(i=0;i<b.length;i++){
  if((t=b.substring(i,i+1))=="<")j=-1;
  else if(j>-1||t==">")for(j=0;j<q.length;j++){
   T=b.substring(i,i+q[j].length);
   if((c?T:T.toLowerCase())==q[j]&&(!w||(C.indexOf(b.substring(i-1,i)))>-1&&C.indexOf(b.substring(i+q[j].length,i+q[j].length+1))>-1)){s+='<b style="color:'+g[t=j%g.length][0]+';background-color:'+g[t][1]+'">'+T+'</b>';i+=q[j].length-1;t=-1;break;}
  }if(t!==-1)s+=t;
 }
 if((t=s.indexOf(' id="searchwords"'))>-1){
  t=s.indexOf(">",t+11);
  s=s.substring(0,t+1)+r+s.substring(t+1,s.length);
 }
 document.body.innerHTML=s;
 if(t<0&&document.getElementById&&(T=document.getElementById("searchwords")))T.innerHTML=r;
}
//--></script>
</head><body><h1>Find on this page</h1>
<table border><tr><td rowspan=2>
This is example text to try searching. This could be the main body text. All text is searched, even the form itself.
<p>The search can now be case-insensitive, which means it will find upper and lower case words, or case sensitive, finding only the exact upper and lower case letters as you enter.
<p>The search can also find whole words or also include word parts by unchecking the <b>Whole words only</b> checkbox.
<td><form name=f><input type=text name=q><input type=button value=Search onclick="docfind(tq=document.f.q.value,tw=document.f.w.checked,tc=document.f.c.checked);document.f.q.value=tq;document.f.w.checked=tw;document.f.c.checked=tc;"><br><input type=checkbox name=w checked>Whole words only<br><input type=checkbox name=c>Match case<div id="searchwords"></div></form>
<tr><td>This could be ads or index or contents bar or whatever. This text is also searched.
</body></html>

I also made it use an element with id="searchwords" to display the words instead of at the top of the page.

zoomwaffles · Nov 9, 2008

doesn't seem to be functioning at all now. Searches by clicking 'search' return nothing, while hitting enter sends me to RoadRunner's search page. I removed a few subtle elements of your code, including the border, the left most column, and the instructions you included. The code I'm using looks like this:

Code:

<html><head><title>Find on this page</title> <script language=JavaScript type=text/javascript><!-- docbak=0; function docfind(Q,w,c){if(Q=="")return;if(docbak===0)docbak=document.body.innerHTML;if(typeof w=="undefined")w=true;  var i,j,t,T,C=" <>{}[](),.!?/;:*=+-_`'"+'"',q=Q.split(" "),b=docbak,s="",r="The following words have been highlighted:",g=[["black","#ff66ff"],["black","#ffff66"],["black","#99ff99"],["black","#ff9999"],["white","blue"],["white","green"],["white","black"]];
 for(j=0;j<q.length;j++){
  r+=' <b style="color:'+g[t=j%g.length][0]+';background-color:'+g[t][1]+'">'+q[j]+'</b>';
  if(!c)q[j]=q[j].toLowerCase();
 }
 for(i=0;i<b.length;i++){
  if((t=b.substring(i,i+1))=="<")j=-1;
  else if(j>-1||t==">")for(j=0;j<q.length;j++){
   T=b.substring(i,i+q[j].length);
   if((c?T:T.toLowerCase())==q[j]&&(!w||(C.indexOf(b.substring(i-1,i)))>-1&&C.indexOf(b.substring(i+q[j].length,i+q[j].length+1))>-1)){s+='<b style="color:'+g[t=j%g.length][0]+';background-color:'+g[t][1]+'">'+T+'</b>';i+=q[j].length-1;t=-1;break;}
  }if(t!==-1)s+=t;
 }
 if((t=s.indexOf(' id="searchwords"'))>-1){
  t=s.indexOf(">",t+11);
  s=s.substring(0,t+1)+r+s.substring(t+1,s.length);
 }
 document.body.innerHTML=s;
 if(t<0&&document.getElementById&&(T=document.getElementById("searchwords")))T.innerHTML=r;
}
//--></script>
</head><body><h1>Player Search</h1>
<tr>
<td><form name=f><input type=text name=q><input type=button value=Search onclick="docfind(tq=document.f.q.value,tw=document.f.w.checked,tc=document.f.c.checked);document.f.q.value=tq;document.f.w.checked=tw;document.f.c.checked=tc;"><br><input type=checkbox name=w checked>Whole words only<br><input type=checkbox name=c>Match case<div id="searchwords"></div></form> <tr><td>
</body></html>

PC-XT · Nov 9, 2008

The reason it wasn't working was that the <!-- code was interfering with the rest of the code on that line. It should be the last code on the line unless you want to use a comment there, like <script><!-- //About this script
I made a few tweaks that may improve browser compatibility and also added a hack to fix the Enter key problem:

Code:

<html><head><title>Find on this page</title>
<script language=JavaScript type=text/javascript><!--
docbak=0;
function docfind(Q,w,c,E){if(Q=="")return;
 if(!((document.body)&&(document.body.innerHTML)))return;
 if(typeof w=="undefined")w=true;
 if(docbak===0)docbak=document.body.innerHTML;
 var i,j,t,T,C=" <>{}[](),.!?/;:*=+-_`'"+'"',q=Q.split(" "),b=docbak,s="",r="The following words have been highlighted:",g=[["black","#ffff66"],["black","#ff66ff"],["black","#99ff99"],["black","cyan"],["black","silver"],["black","#ff9999"],["white","blue"],["white","green"],[document.body.bgColor,document.body.text]];
 for(j=0;j<q.length;j++){
  r+=' <b style="color:'+g[t=j%g.length][0]+';background-color:'+g[t][1]+'">'+q[j]+'</b>';
  if(!c)q[j]=q[j].toLowerCase();
 }
 for(i=0;i<b.length;i++){
  if((t=b.substring(i,i+1))=="<")j=-1;
  else if(j>-1||t==">")for(j=0;j<q.length;j++){
   T=b.substring(i,i+q[j].length);
   if(q[j]==(c?T:T.toLowerCase())&&(!w||(C.indexOf(b.substring(i-1,i)))>-1&&C.indexOf(b.substring(i+q[j].length,i+q[j].length+1))>-1)){s+='<b style="color:'+g[t=j%g.length][0]+';background-color:'+g[t][1]+'">'+T+'</b>';i+=q[j].length-1;t=-1;break;}
  }if(t!==-1)s+=t;
 }
 if((t=s.indexOf(' id="'+E+'"'))>-1){
  t=s.indexOf(">",t+11);
  s=s.substring(0,t+1)+r+s.substring(t+1,s.length);
 }
 document.body.innerHTML=s;
 if(t<0){
  if((document.getElementById)&&(T=document.getElementById(E)))T.innerHTML=r+T.innerHTML;
  else if((document.all)&&(T=document.all[E]))T.innerHTML=r+T.innerHTML;
  //else if(document.layers)/*?*/;
 }
}
function docfindform(){var tq=document.f.q.value,tw=document.f.w.checked,tc=document.f.c.checked;
docfind(tq,tw,tc,"docsearchwords");
document.f.q.value=tq;document.f.w.checked=tw;document.f.c.checked=tc;
}
function onEnterDo(evt,func){return((window.event?window.event.keyCode:evt.which)==13?eval(func):true);}
//--></script>
</head><body><h1>Player Search</h1>
<form name=f><input type=text name=q onKeyDown="onEnterDo(event,'docfindform()')"><input type=button value=Search onclick="docfindform()"><br><input type=checkbox name=w checked>Whole words only<br><input type=checkbox name=c>Match case<div id="docsearchwords"></div></form>
</body></html>

I also changed a few highlight colors.

zoomwaffles · Nov 10, 2008

oh this is great. it's so close to perfect... but i'm still having trouble with a couple little kinks. For example, when I search for "kovalchuk", which I'm 100% sure is in the body of the text, it doesn't find it. That actually seems like the only name it won't return. Any thoughts?

PC-XT · Nov 10, 2008

The problem was that I didn't include enough whitespace characters in the function. I changed it to call another function, called isWordBreak, where you can define the characters that are included in words. I only included English characters and numerals, but other languages can be included by adding their characters to the C variable string in function isWordBreak. (You usually only need to add the lower case letter.) I also added a mapping function called toLatin that lets the search ignore common accents on characters, so if you ever use them in names you won't have to use the special accent character to highlight it. Here is the new docfind function, along with toLatin and isWordBreak:
Code:
docbak=0;
function docfind(Q,w,c,E){if(Q=="")return;
 if(!((document.body)&&(document.body.innerHTML)))return;
 if(typeof w=="undefined")w=true;
 if(docbak===0)docbak=document.body.innerHTML;
 var i,j,t,T,q=toLatin(Q).split(" "),b=docbak,s="",r="The following words have been highlighted:",g=[["black","#ffff66"],["black","#ff66ff"],["black","#99ff99"],["black","cyan"],["black","silver"],["black","#ff9999"],["white","blue"],["white","green"],[document.body.bgColor,document.body.text]];
 for(j=0;j<q.length;j++){
 r+=' '+q[j]+'';
 if(!c)q[j]=q[j].toLowerCase();
 }
 for(i=0;i<b.length;i++){
 if((t=b.substring(i,i+1))=="<")j=-1;
 else if(j>-1||t==">")for(j=0;j<q.length;j++){
 T=b.substring(i,i+q[j].length);
 if(q[j]==(c?toLatin(T):toLatin(T).toLowerCase())&&(!w||isWordBreak(toLatin(b.substring(i-1,i)))&&isWordBreak(toLatin(b.substring(i+q[j].length,i+q[j].length+1))))){s+=''+T+'';i+=q[j].length-1;t=-1;break;}
 }if(t!==-1)s+=t;
 }
 if((t=s.indexOf(' id="'+E+'"'))>-1){//could try removing whitespace to get working in IE, but probably adequate with following checks
 t=s.indexOf(">",t+11);
 s=s.substring(0,t+1)+r+s.substring(t+1,s.length);
 }
 document.body.innerHTML=s;
 if(t<0){
 if((document.getElementById)&&(T=document.getElementById(E)))T.innerHTML=r+T.innerHTML;
 else if((document.all)&&(T=document.all[E]))T.innerHTML=r+T.innerHTML;
 //else if(document[E])/*?*/;
 }
}
function toLatin(s){var i,j,f,t,r="",C={"a":"àáâãäå","ae":"æ","c":"ç","e":"èéêë","i":"ìíîï","n":"ñ","o":"òóôõöø","u":"ùúûü","y":"ýÿ","A":"ÀÁÂÃÄÅ","AE":"Æ","C":"Ç","E":"ÈÉÊË","I":"ÌÍÎÏ","D":"Ð","N":"Ñ","O":"ÒÓÔÕÖØ","U":"ÙÚÛÜ","Y":"Ý\u0178"};
 for(i=0;i<s.length;i++){
 t=s.substring(i,i+1);
 f=true;
 for(j in C)if(C[j].indexOf(t)>-1){r+=j;f=false;break;}
 if(f)r+=t;
 }
 return r;
}
function isWordBreak(c){var C="0123456789abcdefghijklmnopqrstuvwxyz";return(C.indexOf(c.toLowerCase())<0);}
You could revert isWordBreak to use actual symbols, whitespace, etc. that break words, but I found that too complicated, so I have it do a reverse check to see if the character could be part of the word.

I also should say that this function is not compatible with using HTML that shows the browser where to break words, such as or soft hyphen. It won't find words with these in them.

PC-XT · Nov 10, 2008

In case that toLatin function runs too slow, this one may be more efficient:
Code:
function toLatin(s){var i,j,f,t,r="",
C="àáâãäåçèéêëìíîïñòóôõöøùúûüýÿÀÁÂÃÄÅÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖØÙÚÛÜÝ\u0178",
L="aaaaaaceeeeiiiinoooooouuuuyyAAAAAACEEEEIIIIDNOOOOOOUUUUYY";
 for(i=0;i<s.length;i++){
 t=s.substring(i,i+1);
 if(t=="æ")r+="ae";else if(t=="Æ")r+="AE";else if((p=C.indexOf(t))<0)r+=t;else r+=L.substring(p,p+1);
 }
 return r;
}
It is just a matter of preference. One may work better or be easier to edit than the other. The first way makes it easier to translate diphthongs/ligatures into their component letters, or other symbols into whole words. I think sometimes ligatures are translated to just one letter in English, but this function is just basically translation for looks only, such as changing the capital Islandic ETH to Latin D, with no consideration of which language is being used.

I meant to edit my previous post to include this, but took too long. Sorry to double post.

PC-XT · Nov 11, 2008

Two more notes:

1. When Whole words only is unchecked, and two keywords start with the same letters, such as in Jack And Andy, the first word (And) will be the one highlighted. So Andy will never be highlighted, because it starts with And. Here is the replacement function with a length sort function, so that the longer one will be the one highlighted, so when Andy is found, it will be highlighted, and if not, it will check for And:
Code:
docbak=0;
function docfind(Q,w,c,E){if(Q=="")return;
 if(!((document.body)&&(document.body.innerHTML)))return;
 if(typeof w=="undefined")w=true;
 if(docbak===0)docbak=document.body.innerHTML;
 var i,j,t,T,q=toLatin(Q).split(" ").sort(sortLengthDn),b=docbak,s="",r="The following words have been highlighted:",g=[["black","#ffff66"],["black","#ff66ff"],["black","#99ff99"],["black","cyan"],["black","silver"],["black","#ff9999"],["white","blue"],["white","green"],[document.body.bgColor,document.body.text]];

alert(q)

 for(j=0;j<q.length;j++){
 r+=' '+q[j]+'';
 if(!c)q[j]=q[j].toLowerCase();
 }
 for(i=0;i<b.length;i++){
 if((t=b.substring(i,i+1))=="<")j=-1;
 else if(j>-1||t==">")for(j=0;j<q.length;j++){
 T=b.substring(i,i+q[j].length);
 if(q[j]==(c?toLatin(T):toLatin(T).toLowerCase())&&(!w||isWordBreak(toLatin(b.substring(i-1,i)))&&isWordBreak(toLatin(b.substring(i+q[j].length,i+q[j].length+1))))){s+=''+T+'';i+=q[j].length-1;t=-1;break;}
 }if(t!==-1)s+=t;
 }
 if((t=s.indexOf(' id="'+E+'"'))>-1){//could try removing whitespace to get working in IE, but probably adequate with following checks
 t=s.indexOf(">",t+11);
 s=s.substring(0,t+1)+r+s.substring(t+1,s.length);
 }
 document.body.innerHTML=s;
 if(t<0){
 if((document.getElementById)&&(T=document.getElementById(E)))T.innerHTML=r+T.innerHTML;
 else if((document.all)&&(T=document.all[E]))T.innerHTML=r+T.innerHTML;
 //else if(document[E])/*?*/;
 }
}
function sortLengthDn(a,b){return b.length-a.length;}
Alternatively, I could let them both be highlighted, overlapping tags, but this might look weird. It would also be a bit harder to implement, as I would have to redesign part of the function.

2. Scripts in the body are also searched and highlighting is attempted if they contain keywords, but browsers seem to not care if these are changed. At least I have not found any difference in scripts in several versions of Opera, Mozilla, and Internet Explorer. If you have any trouble, let me know. I'm thinking of adding code to just remove them to make the search faster in case of long scripts. Style tags are similar, but browsers often remove these from this search automatically.

PC-XT · Nov 11, 2008

Oh dear, the last post contained code with a debugging alert message still in place. I couldn't edit it in time. Please use the following code instead:

Code:

docbak=0;
function docfind(Q,w,c,E){if(Q=="")return;
 if(!((document.body)&&(document.body.innerHTML)))return;
 if(typeof w=="undefined")w=true;
 if(docbak===0)docbak=document.body.innerHTML;
 var i,j,t,T,q=toLatin(Q).split(" ").sort(sortLengthDn),b=docbak,s="",r="The following words have been highlighted:",g=[["black","#ffff66"],["black","#ff66ff"],["black","#99ff99"],["black","cyan"],["black","silver"],["black","#ff9999"],["white","blue"],["white","green"],[document.body.bgColor,document.body.text]];
 for(j=0;j<q.length;j++){
  r+=' <b style="color:'+g[t=j%g.length][0]+';background-color:'+g[t][1]+'">'+q[j]+'</b>';
  if(!c)q[j]=q[j].toLowerCase();
 }
 for(i=0;i<b.length;i++){
  if((t=b.substring(i,i+1))=="<")j=-1;
  else if(j>-1||t==">")for(j=0;j<q.length;j++){
   T=b.substring(i,i+q[j].length);
   if(q[j]==(c?toLatin(T):toLatin(T).toLowerCase())&&(!w||isWordBreak(toLatin(b.substring(i-1,i)))&&isWordBreak(toLatin(b.substring(i+q[j].length,i+q[j].length+1))))){s+='<b style="color:'+g[t=j%g.length][0]+';background-color:'+g[t][1]+'">'+T+'</b>';i+=q[j].length-1;t=-1;break;}
  }if(t!==-1)s+=t;
 }
 if((t=s.indexOf(' id="'+E+'"'))>-1){//could try removing whitespace to get working in IE, but probably adequate with following checks
  t=s.indexOf(">",t+11);
  s=s.substring(0,t+1)+r+s.substring(t+1,s.length);
 }
 document.body.innerHTML=s;
 if(t<0){
  if((document.getElementById)&&(T=document.getElementById(E)))T.innerHTML=r+T.innerHTML;
  else if((document.all)&&(T=document.all[E]))T.innerHTML=r+T.innerHTML;
  //else if(document[E])/*?*/;
 }
}
function sortLengthDn(a,b){return b.length-a.length;}

PC-XT · Nov 12, 2008

I've added the script ignore part, and also made it say when it doesn't find a word. Here is the new docfind function:

Code:

docbak=0;
function docfind(Q,w,c,E){if(Q=="")return;
 if(!((document.body)&&(document.body.innerHTML)))return;
 if(typeof w=="undefined")w=true;
 var i,j,t,T,b,s;
 if(docbak===0){
  b="";i=0;s=(T=document.body.innerHTML).toLowerCase();j="</scr"+"ipt>";
  while((t=s.indexOf("<script",i))>-1){b+=T.substring(i,t);i=s.indexOf(j,t);i=(i<0?T.length:i+9);}
  docbak=(b+=T.substring(i));
 }else b=docbak;
 s="";
 var q=toLatin(Q).split(" ").sort(sortLengthDn),f=new Array(q.length),r=new Array(),g=[["black","#ffff66"],["black","#ff66ff"],["black","#99ff99"],["black","cyan"],["black","silver"],["black","#ff9999"],["white","blue"],["white","green"],[document.body.bgColor,document.body.text]];
 for(j=0;j<q.length;j++){
  f[j]=false;
  if(!c)q[j]=q[j].toLowerCase();
 }
 for(i=0;i<b.length;i++){
  if((t=b.substring(i,i+1))=="<")j=-1;
  else if(j>-1||t==">")for(j=0;j<q.length;j++){
   T=b.substring(i,i+q[j].length);
   if(q[j]==(c?toLatin(T):toLatin(T).toLowerCase())&&(!w||isWordBreak(toLatin(b.substring(i-1,i)))&&isWordBreak(toLatin(b.substring(i+q[j].length,i+q[j].length+1))))){f[j]=true;s+='<b style="color:'+g[t=j%g.length][0]+';background-color:'+g[t][1]+'">'+T+'</b>';i+=q[j].length-1;t=-1;break;}
  }if(t!==-1)s+=t;
 }
 T=new Array();
 for(j=0;j<q.length;j++){
  if(f[j])r[r.length]='<b style="color:'+g[t=j%g.length][0]+';background-color:'+g[t][1]+'">'+q[j]+'</b>';else T[T.length]=q[j];
 }
 if(r.length>0)r="The following word"+(r.length>1?"s have":" has")+" been highlighted: "+r.join(" ");else r="";
 if(T.length>0)r+="<br>The following word"+(T.length>1?"s have":" has")+" not been found: "+T.join(" ");
 if((t=s.indexOf(' id="'+E+'"'))>-1){//could try removing whitespace to get working in IE, but probably adequate with following checks
  t=s.indexOf(">",t+11);
  s=s.substring(0,t+1)+r+s.substring(t+1,s.length);
 }
 document.body.innerHTML=s;
 if(t<0){
  if((document.getElementById)&&(T=document.getElementById(E)))T.innerHTML=r+T.innerHTML;
  else if((document.all)&&(T=document.all[E]))T.innerHTML=r+T.innerHTML;
  //else if(document[E])/*?*/;
 }
}

This will probably be the last update, unless errors are found, so here is the full code example:

Code:

<html><head><title>Find on this page</title>
<script language=JavaScript type=text/javascript><!--
docbak=0;
function docfind(Q,w,c,E){if(Q=="")return;
 if(!((document.body)&&(document.body.innerHTML)))return;
 if(typeof w=="undefined")w=true;
 var i,j,t,T,b,s;
 if(docbak===0){
  b="";i=0;s=(T=document.body.innerHTML).toLowerCase();j="</scr"+"ipt>";
  while((t=s.indexOf("<script",i))>-1){b+=T.substring(i,t);i=s.indexOf(j,t);i=(i<0?T.length:i+9);}
  docbak=(b+=T.substring(i));
 }else b=docbak;
 s="";
 var q=toLatin(Q).split(" ").sort(sortLengthDn),f=new Array(q.length),r=new Array(),g=[["black","#ffff66"],["black","#ff66ff"],["black","#99ff99"],["black","cyan"],["black","silver"],["black","#ff9999"],["white","blue"],["white","green"],[document.body.bgColor,document.body.text]];
 for(j=0;j<q.length;j++){
  f[j]=false;
  if(!c)q[j]=q[j].toLowerCase();
 }
 for(i=0;i<b.length;i++){
  if((t=b.substring(i,i+1))=="<")j=-1;
  else if(j>-1||t==">")for(j=0;j<q.length;j++){
   T=b.substring(i,i+q[j].length);
   if(q[j]==(c?toLatin(T):toLatin(T).toLowerCase())&&(!w||isWordBreak(toLatin(b.substring(i-1,i)))&&isWordBreak(toLatin(b.substring(i+q[j].length,i+q[j].length+1))))){f[j]=true;s+='<b style="color:'+g[t=j%g.length][0]+';background-color:'+g[t][1]+'">'+T+'</b>';i+=q[j].length-1;t=-1;break;}
  }if(t!==-1)s+=t;
 }
 T=new Array();
 for(j=0;j<q.length;j++){
  if(f[j])r[r.length]='<b style="color:'+g[t=j%g.length][0]+';background-color:'+g[t][1]+'">'+q[j]+'</b>';else T[T.length]=q[j];
 }
 if(r.length>0)r="The following word"+(r.length>1?"s have":" has")+" been highlighted: "+r.join(" ");else r="";
 if(T.length>0)r+="<br>The following word"+(T.length>1?"s have":" has")+" not been found: "+T.join(" ");
 if((t=s.indexOf(' id="'+E+'"'))>-1){//could try removing whitespace to get working in IE, but probably adequate with following checks
  t=s.indexOf(">",t+11);
  s=s.substring(0,t+1)+r+s.substring(t+1,s.length);
 }
 document.body.innerHTML=s;
 if(t<0){
  if((document.getElementById)&&(T=document.getElementById(E)))T.innerHTML=r+T.innerHTML;
  else if((document.all)&&(T=document.all[E]))T.innerHTML=r+T.innerHTML;
  //else if(document[E])/*?*/;
 }
}
function toLatin(s){var i,j,f,t,r="",
C="àáâãäåçèéêëìíîïñòóôõöøùúûüýÿÀÁÂÃÄÅÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖØÙÚÛÜÝ\u0178",
L="aaaaaaceeeeiiiinoooooouuuuyyAAAAAACEEEEIIIIDNOOOOOOUUUUYY";
 for(i=0;i<s.length;i++){
  t=s.substring(i,i+1);
  if(t=="æ")r+="ae";else if(t=="Æ")r+="AE";else if((p=C.indexOf(t))<0)r+=t;else r+=L.substring(p,p+1);
 }
 return r;
}
/*
function toLatin(s){var i,j,f,t,r="",C={"a":"àáâãäå","ae":"æ","c":"ç","e":"èéêë","i":"ìíîï","n":"ñ","o":"òóôõöø","u":"ùúûü","y":"ýÿ","A":"ÀÁÂÃÄÅ","AE":"Æ","C":"Ç","E":"ÈÉÊË","I":"ÌÍÎÏ","D":"Ð","N":"Ñ","O":"ÒÓÔÕÖØ","U":"ÙÚÛÜ","Y":"Ý\u0178"};
 for(i=0;i<s.length;i++){
  t=s.substring(i,i+1);
  f=true;
  for(j in C)if(C[j].indexOf(t)>-1){r+=j;f=false;break;}
  if(f)r+=t;
 }
 return r;
}
*/
function isWordBreak(c){var C="0123456789abcdefghijklmnopqrstuvwxyz";return(C.indexOf(c.toLowerCase())<0);}
function docfindform(){var tq=document.f.q.value,tw=document.f.w.checked,tc=document.f.c.checked;
docfind(tq,tw,tc,"docsearchwords");
document.f.q.value=tq;document.f.w.checked=tw;document.f.c.checked=tc;
}
function sortLengthDn(a,b){return b.length-a.length;}
function onEnterDo(evt,func){return((window.event?window.event.keyCode:evt.which)==13?eval(func):true);}
//--></script>
</head><body><h1>Player Search</h1>
<form name=f><input type=text name=q onKeyDown="onEnterDo(event,'docfindform()')"><input type=button value=Search onclick="docfindform()"><br><input type=checkbox name=w checked>Whole words only<br><input type=checkbox name=c>Match case<div id="docsearchwords"></div></form>
</body></html>

.

zoomwaffles · Nov 12, 2008

Excellent... all seems to be working now. Thanks so much for all your help.

Last question... is there a way to change the highlight color from yellow to pink? The yellow text I have on the page makes it difficult to see yellow highlights. I think pink may stand out more.

Thanks!

PC-XT · Nov 16, 2008

Sorry to take so long to answer, in order to remove yellow highlighting, delete
Code:
["black","#ffff66"],
(including the comma) from the line that starts
Code:
var q=toLatin(Q).split(" ").sort(sortLengthDn),
It will be in a bunch of bracketed items. Don't delete both beginning bracket, only the second one. It should leave
Code:
...,g=[["black","#ff66ff"],["black",...

Log in or Sign up

Code for Search Bar

zoomwaffles Private E-2

PC-XT Master Sergeant

zoomwaffles Private E-2

PC-XT Master Sergeant

zoomwaffles Private E-2

PC-XT Master Sergeant

PC-XT Master Sergeant

zoomwaffles Private E-2

PC-XT Master Sergeant

zoomwaffles Private E-2

PC-XT Master Sergeant

zoomwaffles Private E-2

PC-XT Master Sergeant

PC-XT Master Sergeant

PC-XT Master Sergeant

PC-XT Master Sergeant

PC-XT Master Sergeant

zoomwaffles Private E-2

PC-XT Master Sergeant