Is any ColdFusion script I can put on my webpage that will create a search bar so people can type keywords to match it on the current page in my website? It will be exactly like the finder search bar that comes with your browser window, IE; click edit, then find on this page, which brings up the search box.
I know that JavaScript can do this. I tried to insert JavaScript to my .cfm page. It doesn't work. Any help will be appreciated.
Here is the JavaScript and Form code I used:
[CODE=javascript]<script>
<!-- Hide from old browsers
/*************** *************** ************
* Find In Page Script -- Submitted/revised by Alan Koontz (alankoontz@REM OVETHISyahoo.co m)
* Visit Dynamic Drive (http://www.dynamicdrive.com/) for full source code
* This notice must stay intact for use
*************** *************** ************/
// revised by Alan Koontz -- May 2003
var TRange = null;
var dupeRange = null;
var TestRange = null;
var win = null;
// SELECTED BROWSER SNIFFER COMPONENTS DOCUMENTED AT
// http://www.mozilla.org/docs/web-deve...wser_type.html
var nom = navigator.appNa me.toLowerCase( );
var agt = navigator.userA gent.toLowerCas e();
var is_major = parseInt(naviga tor.appVersion) ;
var is_minor = parseFloat(navi gator.appVersio n);
var is_ie = (agt.indexOf("m sie") != -1);
var is_ie4up = (is_ie && (is_major >= 4));
var is_not_moz = (agt.indexOf('n etscape')!=-1)
var is_nav = (nom.indexOf('n etscape')!=-1);
var is_nav4 = (is_nav && (is_major == 4));
var is_mac = (agt.indexOf("m ac")!=-1);
var is_gecko = (agt.indexOf('g ecko') != -1);
var is_opera = (agt.indexOf("o pera") != -1);
// GECKO REVISION
var is_rev=0
if (is_gecko) {
temp = agt.split("rv:" )
is_rev = parseFloat(temp[1])
}
// USE THE FOLLOWING VARIABLE TO CONFIGURE FRAMES TO SEARCH
// (SELF OR CHILD FRAME)
// If you want to search another frame, change from "self" to
// the name of the target frame:
// e.g., var frametosearch = 'main'
//var frametosearch = 'main';
var frametosearch = self;
function search(whichfor m, whichframe) {
// TEST FOR IE5 FOR MAC (NO DOCUMENTATION)
if (is_ie4up && is_mac) return;
// TEST FOR NAV 6 (NO DOCUMENTATION)
if (is_gecko && (is_rev <1)) return;
// TEST FOR Opera (NO DOCUMENTATION)
if (is_opera) return;
// INITIALIZATIONS FOR FIND-IN-PAGE SEARCHES
if(whichform.fi ndthis.value!=n ull && whichform.findt his.value!='') {
str = whichform.findt his.value;
win = whichframe;
var frameval=false;
if(win!=self)
{
frameval=true; // this will enable Nav7 to search child frame
win = parent.frames[whichframe];
}
}
else return; // i.e., no search string was entered
var strFound;
// NAVIGATOR 4 SPECIFIC CODE
if(is_nav4 && (is_minor < 5)) {
strFound=win.fi nd(str); // case insensitive, forward search by default
// There are 3 arguments available:
// searchString: type string and it's the item to be searched
// caseSensitive: boolean -- is search case sensitive?
// backwards: boolean --should we also search backwards?
// strFound=win.fi nd(str, false, false) is the explicit
// version of the above
// The Mac version of Nav4 has wrapAround, but
// cannot be specified in JS
}
// NAVIGATOR 7 and Mozilla rev 1+ SPECIFIC CODE (WILL NOT WORK WITH NAVIGATOR 6)
if (is_gecko && (is_rev >= 1)) {
if(frameval!=fa lse) win.focus(); // force search in specified child frame
strFound=win.fi nd(str, false, false, true, false, frameval, false);
// The following statement enables reversion of focus
// back to the search box after each search event
// allowing the user to press the ENTER key instead
// of clicking the search button to continue search.
// Note: tends to be buggy in Mozilla as of 1.3.1
// (see www.mozilla.org) so is excluded from users
// of that browser.
if (is_not_moz) whichform.findt his.focus();
// There are 7 arguments available:
// searchString: type string and it's the item to be searched
// caseSensitive: boolean -- is search case sensitive?
// backwards: boolean --should we also search backwards?
// wrapAround: boolean -- should we wrap the search?
// wholeWord: boolean: should we search only for whole words
// searchInFrames: boolean -- should we search in frames?
// showDialog: boolean -- should we show the Find Dialog?
}
if (is_ie4up) {
// EXPLORER-SPECIFIC CODE revised 5/21/03
if (TRange!=null) {
TestRange=win.d ocument.body.cr eateTextRange() ;
if (dupeRange.inRa nge(TestRange)) {
TRange.collapse (false);
strFound=TRange .findText(str);
if (strFound) {
//the following line added by Mike and Susan Keenan, 7 June 2003
win.document.bo dy.scrollTop = win.document.bo dy.scrollTop + TRange.offsetTo p;
TRange.select() ;
}
}
else {
TRange=win.docu ment.body.creat eTextRange();
TRange.collapse (false);
strFound=TRange .findText(str);
if (strFound) {
//the following line added by Mike and Susan Keenan, 7 June 2003
win.document.bo dy.scrollTop = TRange.offsetTo p;
TRange.select() ;
}
}
}
if (TRange==null || strFound==0) {
TRange=win.docu ment.body.creat eTextRange();
dupeRange = TRange.duplicat e();
strFound=TRange .findText(str);
if (strFound) {
//the following line added by Mike and Susan Keenan, 7 June 2003
win.document.bo dy.scrollTop = TRange.offsetTo p;
TRange.select() ;
}
}
}
if (!strFound) alert ("String '"+str+"' not found!") // string not found
}
// -->
</script>
[/CODE]
[HTML]<form name="form1" onSubmit="searc h(document.form 1, frametosearch); return false"><input type="text" name="findthis" size="15" title="Press 'ALT s' after clicking submit to repeatedly search page"> <input type="submit" value="Find in Page" ACCESSKEY="s"></form>
[/HTML]
Thanks,
YaoBao
I know that JavaScript can do this. I tried to insert JavaScript to my .cfm page. It doesn't work. Any help will be appreciated.
Here is the JavaScript and Form code I used:
[CODE=javascript]<script>
<!-- Hide from old browsers
/*************** *************** ************
* Find In Page Script -- Submitted/revised by Alan Koontz (alankoontz@REM OVETHISyahoo.co m)
* Visit Dynamic Drive (http://www.dynamicdrive.com/) for full source code
* This notice must stay intact for use
*************** *************** ************/
// revised by Alan Koontz -- May 2003
var TRange = null;
var dupeRange = null;
var TestRange = null;
var win = null;
// SELECTED BROWSER SNIFFER COMPONENTS DOCUMENTED AT
// http://www.mozilla.org/docs/web-deve...wser_type.html
var nom = navigator.appNa me.toLowerCase( );
var agt = navigator.userA gent.toLowerCas e();
var is_major = parseInt(naviga tor.appVersion) ;
var is_minor = parseFloat(navi gator.appVersio n);
var is_ie = (agt.indexOf("m sie") != -1);
var is_ie4up = (is_ie && (is_major >= 4));
var is_not_moz = (agt.indexOf('n etscape')!=-1)
var is_nav = (nom.indexOf('n etscape')!=-1);
var is_nav4 = (is_nav && (is_major == 4));
var is_mac = (agt.indexOf("m ac")!=-1);
var is_gecko = (agt.indexOf('g ecko') != -1);
var is_opera = (agt.indexOf("o pera") != -1);
// GECKO REVISION
var is_rev=0
if (is_gecko) {
temp = agt.split("rv:" )
is_rev = parseFloat(temp[1])
}
// USE THE FOLLOWING VARIABLE TO CONFIGURE FRAMES TO SEARCH
// (SELF OR CHILD FRAME)
// If you want to search another frame, change from "self" to
// the name of the target frame:
// e.g., var frametosearch = 'main'
//var frametosearch = 'main';
var frametosearch = self;
function search(whichfor m, whichframe) {
// TEST FOR IE5 FOR MAC (NO DOCUMENTATION)
if (is_ie4up && is_mac) return;
// TEST FOR NAV 6 (NO DOCUMENTATION)
if (is_gecko && (is_rev <1)) return;
// TEST FOR Opera (NO DOCUMENTATION)
if (is_opera) return;
// INITIALIZATIONS FOR FIND-IN-PAGE SEARCHES
if(whichform.fi ndthis.value!=n ull && whichform.findt his.value!='') {
str = whichform.findt his.value;
win = whichframe;
var frameval=false;
if(win!=self)
{
frameval=true; // this will enable Nav7 to search child frame
win = parent.frames[whichframe];
}
}
else return; // i.e., no search string was entered
var strFound;
// NAVIGATOR 4 SPECIFIC CODE
if(is_nav4 && (is_minor < 5)) {
strFound=win.fi nd(str); // case insensitive, forward search by default
// There are 3 arguments available:
// searchString: type string and it's the item to be searched
// caseSensitive: boolean -- is search case sensitive?
// backwards: boolean --should we also search backwards?
// strFound=win.fi nd(str, false, false) is the explicit
// version of the above
// The Mac version of Nav4 has wrapAround, but
// cannot be specified in JS
}
// NAVIGATOR 7 and Mozilla rev 1+ SPECIFIC CODE (WILL NOT WORK WITH NAVIGATOR 6)
if (is_gecko && (is_rev >= 1)) {
if(frameval!=fa lse) win.focus(); // force search in specified child frame
strFound=win.fi nd(str, false, false, true, false, frameval, false);
// The following statement enables reversion of focus
// back to the search box after each search event
// allowing the user to press the ENTER key instead
// of clicking the search button to continue search.
// Note: tends to be buggy in Mozilla as of 1.3.1
// (see www.mozilla.org) so is excluded from users
// of that browser.
if (is_not_moz) whichform.findt his.focus();
// There are 7 arguments available:
// searchString: type string and it's the item to be searched
// caseSensitive: boolean -- is search case sensitive?
// backwards: boolean --should we also search backwards?
// wrapAround: boolean -- should we wrap the search?
// wholeWord: boolean: should we search only for whole words
// searchInFrames: boolean -- should we search in frames?
// showDialog: boolean -- should we show the Find Dialog?
}
if (is_ie4up) {
// EXPLORER-SPECIFIC CODE revised 5/21/03
if (TRange!=null) {
TestRange=win.d ocument.body.cr eateTextRange() ;
if (dupeRange.inRa nge(TestRange)) {
TRange.collapse (false);
strFound=TRange .findText(str);
if (strFound) {
//the following line added by Mike and Susan Keenan, 7 June 2003
win.document.bo dy.scrollTop = win.document.bo dy.scrollTop + TRange.offsetTo p;
TRange.select() ;
}
}
else {
TRange=win.docu ment.body.creat eTextRange();
TRange.collapse (false);
strFound=TRange .findText(str);
if (strFound) {
//the following line added by Mike and Susan Keenan, 7 June 2003
win.document.bo dy.scrollTop = TRange.offsetTo p;
TRange.select() ;
}
}
}
if (TRange==null || strFound==0) {
TRange=win.docu ment.body.creat eTextRange();
dupeRange = TRange.duplicat e();
strFound=TRange .findText(str);
if (strFound) {
//the following line added by Mike and Susan Keenan, 7 June 2003
win.document.bo dy.scrollTop = TRange.offsetTo p;
TRange.select() ;
}
}
}
if (!strFound) alert ("String '"+str+"' not found!") // string not found
}
// -->
</script>
[/CODE]
[HTML]<form name="form1" onSubmit="searc h(document.form 1, frametosearch); return false"><input type="text" name="findthis" size="15" title="Press 'ALT s' after clicking submit to repeatedly search page"> <input type="submit" value="Find in Page" ACCESSKEY="s"></form>
[/HTML]
Thanks,
YaoBao
Comment