...

View Full Version : How to search in text with javascript



janne67
01-19-2005, 10:12 AM
Found this link
http://www.javascripter.net/faq/searchin.htm
i have used a part of the code



<form onSubmit="if(this.searchField.value != null && this.searchField.value != '')searchText(this.searchField.value);return false">
<input type="text" name="searchField" size="20">
<input type="submit" value="Search">

</form>





function searchText(str)
{
var TRange=null;


if (TRange!=null)
{
TRange.collapse(false)
strFound=TRange.findText(str)
if (strFound)
TRange.select()
}
if (TRange==null || strFound==0)
{
TRange=self.document.body.createTextRange()
strFound=TRange.findText(str)
if (strFound)
TRange.select()
}

if (!strFound)
alert ("String '"+str+"' not found!")
}
The problem is that the javascript is located in base.js och the searchform is in mGlossary.htm and the text to search is in glossary.htm. How could i search the text in glossary.htm

jbot
01-19-2005, 11:15 AM
the JS needs to be every HTML file :rolleyes:

janne67
01-19-2005, 11:25 AM
Couldn´t it be done when i have the text field and search button in mGlossary.htm and the text to search in glossary.htm

jbot
01-19-2005, 11:57 AM
Javascript has to be on every page to work. it can't go and look at other pages. period.

janne67
01-19-2005, 12:11 PM
Could I inwoke the search function from another side for example mGlossary.htm? If i have the search function in glossary.htm

jbot
01-19-2005, 12:32 PM
you're just not getting this, are you. outside of framesets, if you have a piece of Javacsript in one page, another HTML page cannot get access to it. and to repeat what i said about, Javascript cannot access pages which didn't call them.

kapiche?

glenngv
01-19-2005, 01:57 PM
outside of framesets
You have to include iframes and 2 opened windows (of the same domain) where one opened the other. They can access each other's script.

jbot
01-19-2005, 02:20 PM
You have to include iframes and 2 opened windows (of the same domain) where one opened the other. They can access each other's script.

i understand that ... i just subsume those under framesets for convience given they somewhat work in the same way.

glenngv
01-20-2005, 02:40 AM
i understand that ... i just subsume those under framesets for convience given they somewhat work in the same way.
It's better to make it specific than to generalize it like that to avoid confusion to the poster. He/she might get the impression that you can only access scripts within real framesets.

Going back to the question...
If you want to search a certain page and the search field and button is on another page, you have to use frames, iframes or open the other page in another window. In other words, the 2 pages must be loaded at the same time to make them work together.

janne67
01-20-2005, 08:47 AM
I have an two iframes on one page called index_tabs.htm one iframe with id="menu" in this i load the file mGlossary.htm (menu), this one contains the search text and the button submit.
In the other iframe with id="show" i load a file with name glossary.htm in this one i have the text to search

glenngv
01-20-2005, 03:11 PM
Modify the script like this:


<script language="JavaScript">
<!--
var TRange=null

function findString (str, win) {
if (parseInt(navigator.appVersion)<4) return;
var strFound;
if (navigator.appName=="Netscape") {

if (!win) win = self;
win.focus();

// NAVIGATOR-SPECIFIC CODE

strFound=win.find(str);
if (!strFound) {
strFound=win.find(str,0,1)
while (win.find(str,0,1)) continue
}
}
if (navigator.appName.indexOf("Microsoft")!=-1) {

// EXPLORER-SPECIFIC CODE

if (TRange!=null) {
TRange.collapse(false)
strFound=TRange.findText(str)
if (strFound) TRange.select()
}
if (TRange==null || strFound==0) {
TRange=win.document.body.createTextRange()
strFound=TRange.findText(str)
if (strFound) TRange.select()
}
}
if (!strFound) alert ("String '"+str+"' not found!")
}

//-->
</script>
...
<iframe id="show" src="glossary.htm"></iframe>
<form name="f1" action=""
onSubmit="if(this.t1.value!=null && this.t1.value!='')
findString(this.t1.value, document.getElementById('show').contentWindow);return false"
>
<input type="text" name=t1 value="text" size=20>
<input type="submit" name=b1 value="Find">
</form>

janne67
01-20-2005, 03:26 PM
I think you missunderstod me a little bit

Hera is the code without javascript

Code for index_tabs.htm



<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="CSS/base.css" type="text/css">
<script type="text/javascript" language="javascript" src="Javascript/base.js"></script>

</head>

<body onLoad="javascript:init()">

<div id="globalcontainer">
<div id="header">
<ul>
<li id="current"><a href="#" onClick="activateTab(this.parentNode, 'home')">Home</a></li>
<li><a href="#" onClick="activateTab(this.parentNode, 'channels')">Channels</a></li>
<li><a href="#" onClick="activateTab(this.parentNode, 'diagnosis')">Diagnosis and treatment</a></li>
<li><a href="#" onClick="activateTab(this.parentNode, 'glossary')">Glossary</a></li>
<li><a href="#" onClick="activateTab(this.parentNode, 'needling')">Needling</a></li>
<li><a href="#" onClick="activateTab(this.parentNode, 'pointCat')">Point categorie</a></li>
<li><a href="#" onClick="activateTab(this.parentNode, 'pointindex')">Point index</a></li>
<!--<li><a href="#" onClick="activateTab(this.parentNode, 'methods')">Point selection methods</a></li>-->
</ul>
</div>
<br style="clear:left"/>
<span class="style1"></span>
<div id="box">
<iframe id="meny" width="595" height="100" src="Menu/mHome.htm" frameborder="0"></iframe>

<!-- Detta har jag gjort för att vi skall uppdatera bara meny diven.
<form name="head">
<select name="headselect" onChange="populate(this.selectedIndex, this.form)">
<option>Välj meridian</option>
<option>Meridian 1</option>
<option>Meridian 2</option>
<option>Meridian 3</option>
</select><br><br>

<select name="subselect" onChange="change(this.options[selectedIndex].value)">
<option>--</option>
</select>
</form>
-->
</div >



<div id="view">
<iframe name="show" id="show" src="Javascript/base.js" width="595" height="445"></iframe>
</div>
</div>

</body>
</html>


code for mGlossary.htm




<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="../CSS/menu.css" type="text/css">
<script language="javascript" src="../Data/Presentation/glossary.htm"></script>
</head>

<body>
<a href="../Data/Presentation/glossary.htm#A" target="show">A</a> | <a href="../Data/Presentation/glossary.htm#B" target="show">B</a> | <a href="../Data/Presentation/glossary.htm#C" target="show">C</a> | <a href="../Data/Presentation/glossary.htm#D target="show"">D</a> | <a href="../Data/Presentation/glossary.htm#E" target="show">E</a> | <a href="../Data/Presentation/glossary.htm#F" target="show">F</a> | <a href="../Data/Presentation/glossary.htm#G" target="show">G</a> |
<a href="../Data/Presentation/glossary.htm#H" target="show">H</a> | <a href="../Data/Presentation/glossary.htm#I" target="show">I</a> | <a href="../Data/Presentation/glossary.htm#J" target="show">J</a> | <a href="../Data/Presentation/glossary.htm#K" target="show">K</a> | <a href="../Data/Presentation/glossary.htm#L" target="show">L</a> | <a href="../Data/Presentation/glossary.htm#M" target="show">M</a> | <a href="../Data/Presentation/glossary.htm#N" target="show">N</a> |
<a href="../Data/Presentation/glossary.htm#O" target="show">O</a> | <a href="../Data/Presentation/glossary.htm#P" target="show">P</a> | <a href="../Data/Presentation/glossary.htm#Q" target="show">Q</a> | <a href="../Data/Presentation/glossary.htm#R" target="show">R</a> | <a href="../Data/Presentation/glossary.htm#S" target="show">S</a> | <a href="../Data/Presentation/glossary.htm#T" target="show">T</a> | <a href="../Data/Presentation/glossary.htm#U" target="show">U</a> |
<a href="../Data/Presentation/glossary.htm#V" target="show">V</a> | <a href="../Data/Presentation/glossary.htm#W" target="show">W</a> | <a href="../Data/Presentation/glossary.htm#X" target="show">X</a> | <a href="../Data/Presentation/glossary.htm#Y" target="show">Y</a> | <a href="../Data/Presentation/glossary.htm#Z" target="show">Z</a> |<br>

<!--if(this.t1.value!=null && this.t1.value!='')findString(this.t1.value);return false"-->
<form onSubmit="if(this.searchField.value != null && this.searchField.value != '')searchText(this.searchField.value);return false">
<input type="text" name="searchField" size="20">
<input type="submit" value="Search">

</form>
</body>
</html>


code for glossary.htm



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="../../CSS/base.css" type="text/css">


<title>Glossary</title>
</head>

<body>

<!--
<form name="search" onSubmit="return findInPage(this.string.value);">
<font size=3>
<input type="submit" value="Sök efter">
<input name="string" type="text" size="20" onChange="n = 0;">
</font>
</form>
-->


<div id="search">
<form name="searchField" onSubmit="findInPage(this.string.value);">
<font style="font-size:10px ">
<input style="font-size:9px " type="text" size="20">
<input style="font-size:9px " type="submit" value="Search">
</font>


</form>


</div>

<div id="mass">
<a name="A">A</a><br>
<a name="B">B</a><br>
<a name="C">C</a><br>
<a name="D">D</a><br>
<a name="E">E</a><br>
<a name="F">F</a><br>
<a name="G">G</a><br>
<a name="H">H</a><br>
<a name="I">I</a><br>
<a name="J">J</a><br>
<a name="K">K</a><br>
<a name="L">L</a><br>
<a name="M">M</a><br>
<a name="N">N</a><br>
<a name="O">O</a><br>
<a name="P">P</a><br>
<a name="Q">Q</a><br>
<a name="R">R</a><br>
<a name="S">S</a><br>
<a name="T">T</a><br>
<a name="U">U</a><br>
<a name="V">V</a><br>
<a name="W">W</a><br>
<a name="X">X</a><br>
<a name="Y">Y</a><br>
<a name="Z">Z</a>

</div>

glenngv
01-20-2005, 03:39 PM
You cannot include an html page as javascript!

<script language="javascript" src="../Data/Presentation/glossary.htm"></script>

janne67
01-20-2005, 04:08 PM
Sorry i forgot to remove it. It was a test. I have changed it back now :)

dlg0351
01-20-2005, 05:38 PM
I find this code to be very useful, however if you have an html file with a lot of text on it and place the search part at the top of the page and it finds a word lower in the page which causes the page to scroll down then the input and search button will not be visible on the page.

The user will have to scroll up each time to change their search or to click the search button to find the next time their search text appears on the page. Do you know how to manipulate the code to work in frames so that the search part in on one page and and searches on another page? Like as follows:

<html>
<head>
<title></title>

<frameset rows="80,*">
<frame src="file_with_input_and_search_button.html">

<frameset cols="*">
<frame name="main" src="file_to_be_searched.html">
</frameset>
</frameset>

</body>
</html>

Any help would be greatly appreciated!

glenngv
01-21-2005, 03:57 AM
janne67, can you explain to us again in words (with few codes as much as possible)?

PROWEBWORKS.NET, I did just that. See the modified code I did in my previous post. You just need to change the form in file_with_input_and_search_button.html in such a way that the reference to the target frame is correct.


<form name="f1" action=""
onSubmit="if(this.t1.value!=null && this.t1.value!='')
findString(this.t1.value, parent.frames['main']);return false"
>
<input type="text" name=t1 value="text" size=20>
<input type="submit" name=b1 value="Find">
</form>

janne67
01-21-2005, 08:43 AM
It got it to work. Thanks very much for the help :thumbsup:

glenngv
01-21-2005, 10:27 AM
Okey i try agiain.

In index_tabs.htm i have two iframes one that has id="meny" in this i load different htm pages depending on what chose the user chose in the menu that i have on index_tabs.htm.

When the user has chosen "Glossary" in the menu it loads mGlossary.htm in the "meny" frame, it even loades the second frame that has the id="show" whith an html page named glossary.htm. In the file mGlossary.htm i have one text field to type the search string in and one submit button to start the search width. In the glossary.htm i have alot of text to search in.

I hope this help :)
Put the findString script (with my modification) in mGlossary.htm where the search field and button are. If the script is external, include it in that page like this:

<script type="text/javascript" src="path/to/script.js"></script>

Then you access the script in the form in mGlossary.htm like this:

<form name="f1" action=""
onSubmit="if(this.t1.value!=null && this.t1.value!='')
findString(this.t1.value, parent.document.getElementById('show').contentWindow);return false"
>
<input type="text" name=t1 value="text" size=20>
<input type="submit" name=b1 value="Find">
</form>

janne67
01-21-2005, 10:30 AM
I got it to work. Thanks very much for the help :)

dlg0351
01-21-2005, 03:26 PM
Hey glenngv,
I tried changing the code the way you said to get it to work in frames but it does not seem to be working can you take a look:

This is the main page:
<html>
<head>
<title></title>

<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<frameset rows="80,*" border=0>
<frame src="search.html" noresize scrolling=no>

<frameset cols="*" border=0>
<frame src="search_text.html" name="main" noresize scrolling=auto>
</frameset>
</frameset>

</body>
</html>


This is search.html:
<html>
<head>
<title></title>
</head>

<body>

<form name="f1" action=""
onSubmit="if(this.t1.value!=null && this.t1.value!='')
findString(this.t1.value, parent.frames['main']);return false"
>
<input type="text" name=t1 value="" size=20>
<input type="submit" name=b1 value="Search">
</form>

<script language="JavaScript">
<!--
var TRange=null

function findString (str) {
if (parseInt(navigator.appVersion)<4) return;
var strFound;
if (navigator.appName=="Netscape") {

// NAVIGATOR-SPECIFIC CODE

strFound=self.find(str);
if (!strFound) {
strFound=self.find(str,0,1)
while (self.find(str,0,1)) continue
}
}
if (navigator.appName.indexOf("Microsoft")!=-1) {

// EXPLORER-SPECIFIC CODE

if (TRange!=null) {
TRange.collapse(false)
strFound=TRange.findText(str)
if (strFound) TRange.select()
}
if (TRange==null || strFound==0) {
TRange=self.document.body.createTextRange()
strFound=TRange.findText(str)
if (strFound) TRange.select()
}
}
if (!strFound) alert ('The search for "'+str+'" returned no results.')
}
//-->
</script>

</body>
</html>


It seems to be searching on the search.html page and not the search_text.html page.

Thanks.

glenngv
01-24-2005, 06:03 AM
Use the modified findString() method I posted in my previous post, the one where the modifications are in red text.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum