Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Using JavaScript to highlight words in a page

Status
Not open for further replies.
steve100

steve100

Technical User
Aug 15, 2002
35
0
0
GB

Hi can anyone help I am trying to develop a function which allows a user to enter search terms and have these highlighted on an a-z page.

I can't see what is wrong with this function - can anyone help?

<script language="javascript" type="text/javascript" >

function textSearch() {
var links = document.getElementsByTagName("a");
var inputText = document.getElementById("formSearchBox");


for (var i=0; i < links.length; i++) {


// if list item is equal to the search term
var linkText = links.firstChild.nodeValue.toLowerCase();

if (linkText.indexOf(inputText.value.toLowerCase()) != -1) {
// add a search class .hilite to the list item
links.setAttribute("class", "hilite");
} else
links.setAttribute("class", "");
}


}

}
</script>


Called from...

<form name="form-search" method="post" action="#">
<p>Type some keywords or a phrase to search this resource</p>
<p>
<input type="text" name="d" id="formSearchBox" onkeyup="textSearch();" />
</p>
</form>

Using this stylesheet...

<style media="screen" type="text/css">
.hilite {
background-color: #FF9;
font-weight:bold;
}
</style>



Thanks
Steven
 
Sort by date Sort by votes
instead of

Code: 
var linkText = links[i].firstChild.nodeValue.toLowerCase();
try
Code: 
var linkText = links[i].innerHTML.toLowerCase();
or
Code: 
var linkText = links[i].innerText.toLowerCase();

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]
 
Upvote 0 Downvote
Thanks but Firefox should be DOM Core compliant -
 
Upvote 0 Downvote
might want to try an onsubmit="return false;" if you are not planning on actually submitting the form. when you submit the form the page will reload, therefore the JS will not run.

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]
 
Upvote 0 Downvote
I think the problem is something other than the way I am addressing elements this code works fine (but it doesn't allow individual words to be searched within link text).

<script language="javascript" type="text/javascript" >

function textSearch() {
var links = document.getElementsByTagName("a");
var inputText = document.getElementById("formSearchBox");


for (var i=0; i < links.length; i++) {





// if list item is equal to the search term
if (links.firstChild.nodeValue == inputText.value) {
// add a search class .hilite to the list item
links.setAttribute("class", "hilite");


}



}

}
</script>
 
Upvote 0 Downvote
Still can't get it to work could you paste your code and let me know browser type and version.

Many thanks
Steven
 
Upvote 0 Downvote
i had only tested that in FF 1.0.7.

this works in both IE 6.0.2800 and FF 1.0.7.:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html>
<head>
<title>Untitled</title>
<style media="screen" type="text/css">
.hilite {
    background-color: #FF9;
    font-weight:bold;
}
</style>

<script language="javascript" type="text/javascript" >
function textSearch() {      
    var links = document.getElementsByTagName("a");    
    var inputText = document.getElementById("formSearchBox");

    for (var i=0; i < links.length; i++) {         
        // if list item is equal to the search term
        var linkText = links[i].firstChild.nodeValue.toLowerCase();
        if (linkText.indexOf(inputText.value.toLowerCase()) != -1) {                     
            // add a search class .hilite to the list item                    
            links[i].className='hilite';
        } else {
            links[i].className='';
        }
    }
}
</script>
</head>

<body>

<form name="form-search" method="post" action="#">
<p>Type some keywords or a phrase to search this resource</p>
<p>
<input type="text" name="d" id="formSearchBox" onkeyup="textSearch();" />
</p>
</form>

<a href="#">cory</a>
<a href="#">bob</a>
<a href="#">asiscory</a>
<a href="#">joe</a>
<a href="#">cory</a>
<a href="#">tim</a>
<a href="#">coryarthus</a>

</body>
</html>

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]
 
Upvote 0 Downvote
My Page only works when I remove the top nav bars - why would that be a problem? Steve

<body class="wide-col" id="cars">

<div id="site-header">
<div id="site-titles">
<h1 id="site-title"><a id="stt-link-home" href="../../index.php"><img src="../../gui/site-logo.gif" alt="Making your teaching inclusive" /></a></h1>
<a id="stt-link-ou" href=" src="../../gui/logo-ou.gif" alt="The Open University" /></a> <a id="stt-link-hefce" href=" src="../../gui/logo-hefce.gif" alt="hefce" /></a> </div>
<ul id="site-nav">
<li><a id="stn-link-content" href="#page-content">Skip to content</a></li>
<li><a id="stn-link-home" href="../../index.php">Home</a></li>
<li><a id="stn-link-about" href="about.php">About</a></li>
<li><a id="stn-link-az" href="a-z.php">A-Z</a></li>
<li><a id="stn-link-sitemap" href="sitemap.php">Site map</a></li>
<li><a id="stn-link-search" href=" </ul>

<ul id="section-nav">
<li><a id="sen-link1" href="../understanding-and-awareness/index.php"><span>Understanding and awareness</span></a></li>
<li><a id="sen-link2" href="../inclusive-teaching/index.php"><span>Inclusive teaching</span></a></li>
<li><a id="sen-link3" href="../identifying-a-students-needs/index.php"><span>Identifying a student's needs</span></a></li>
<li><a id="sen-link4" href="../describing-disability/index.php"><span>Describing disability</span></a></li>
<li><a id="sen-link5" href="../legal-and-professional-requirements/index.php"><span>Legal and professional requirements</span></a></li>
<li><a id="sen-link6" href="../staff-development/index.php"><span>Staff development</span></a></li>
</ul>
</div>
 
Upvote 0 Downvote
not enough information for a meaningful answer. what do you mean "it doesn't work"? also, what is your complete css? do you have any other javascript?

*cLFlaVA
----------------------------
[tt]I already made like infinity of those at scout camp...[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]
[banghead]
 
Upvote 0 Downvote
It works when the top nav is removed. I think that it has something to do with the fact that the top nav has links which contain spans and images rather than just text. When I remove the spans and images its OK.

Maybe I can do some kind of conditional test like whether the firstChild is a text node or something before I run the function (I tried

if (linkText.nodeType == 3) {

}

But it didn't work

Steve
 
Upvote 0 Downvote
Code now works fine - many thanks for your expertise!

Steven

<script language="javascript" type="text/javascript">
function textSearch() {
var links = document.getElementsByTagName("a");
var inputText = document.getElementById("formSearchBox");

for (var i=0; i < links.length; i++) {
// if list item is equal to the search term

if (links.firstChild.nodeType == 3) {
var linkText = links.firstChild.nodeValue.toLowerCase();

// only process text within links


if (linkText.indexOf(inputText.value.toLowerCase()) != -1) {
// add a search class .hilite to the list item
links.className='hilite';
} else {
links.className='';
}

}

}
}
</script>
 
Upvote 0 Downvote
Only problem is now the user can enter a blank space and it matches all blank spaces in the links. Anyway to test that only character data is entered in the input box - not spaces (maybe when I test for nodeType)

Steve
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
154
lexer
lexer
Mike Lewis
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid)
Replies
4
Views
270
Mike Lewis
Mike Lewis
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
79
Daniel K
Daniel K
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
183
xwb
xwb
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
135
JScannell
JScannell

Part and Inventory Search

Sponsor

Back
Top