faqts : Computers : Programming : Languages : JavaScript : Document

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

7 of 10 people (70%) answered Yes
Recently 3 of 4 people (75%) answered Yes

Entry

Can I search for a user-inputted word on a WEBPAGE (ie: have a box at the top, user enters GRAPHICS & clicks FIND & it positions cursor at the word)

May 17th, 2001 05:31
Colin Fraser, joel callahan,


For starters, why try to reinvent the wheel? The browsers all have built 
in search functionality anyway why not use those. I suggest that if you 
were to seach the documentation you should be able to get sufficient 
information as to how to access the search function of the browser. 
This script was adapted from a script I used ages ago when I would have 
been better off using the browser's search and I have no idea where it 
came from originally.  BTW it failed to do what I wanted it to do then 
as well. This may, however, be the closest to what you are looking for. 
In the main body:
This script calls a popup window sized for the task required of it. 
<script language="JavaScript"><!--
function searchWindow() {
 if (document.all || document.layers) {
     popup = 
window.open('search.htm','searchWindow','menubar=no,scrollbars=no,status
=no,width=375,height=125,top=10,left=50');
     if (!popup.opener) popup.opener = self;
 }
}
 //--></script>
The button to call the search popup
<FORM>
 <INPUT TYPE="button" VALUE="Search" onClick="searchWindow()">
</FORM>
In the search window
<body onBlur="self.focus()">
<! the search dialog is always on top >
<p><b>Please enter text to search for:</b> <br>
 <form name="fName">
 <input type="text" name="sText">
 <input type="button" value="  Search  " onClick="docSearch()">
 <input type="button" value="  Close  " onClick="window.close()">
 </form>
<i>This window will automatically stay on top</i>
<! This script sets the cursor to the text box in the form > 
<SCRIPT LANGUAGE="JavaScript"><!--
document.fName.sText.focus();
 //--></SCRIPT>
 <script language="JavaScript"><!--
 var posn = 0;
 var found = false;
//the search function with tests some of which do not work
function docSearch() {
     if (document.fName.sText.value == '') {
         alert('Please enter text to search for');
         return;
     }
     if (document.all) {
         var text = opener.document.body.createTextRange();
         for (var i=0; i<=posn && 
(found=text.findText(document.fName.sText.value)) != false; i++) {
             text.moveStart("sChar", 1);
             text.moveEnd("eChar");
        }
         if (found) {
             text.moveStart("sChar", -1);
             text.findText(document.fName.sText.value);
             text.select();
             text.scrollIntoView();
             posn++;
         }
         else {
             posn=0;
             text = opener.document.body.createTextRange();
             text.findText(document.fName.sText.value);
             text.select();
             text.scrollIntoView();
         }
     }
     else if (document.layers) {
         opener.find(document.fName.sText.value,false);
     }
 }
 //--></script>
To add any further functionality is asking for a job that is far too big 
to be done out of the goodness of anyone's heart.  
This will probably not work in Internet Explorer but it should be 
adaptable. 
Good luck with it.