SitePoint Sponsor |
|
User Tag List
Results 1 to 18 of 18
Thread: A-Z highlight function
-
Dec 14, 2005, 04:26 #1
- Join Date
- Aug 2005
- Posts
- 254
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
A-Z highlight function
Hi
I want to use a A-Z list page with a search box and when the user types in a search term the words on the A-Z page become highlighted. Doe anyone know how I can using JavaScript to do this?
A similar feature is in customise this google hilite function so that it displays search results when a page is linked from google http://www.textism.com/tools/google_hilite/.
Does anyone know how to do this?
Thanks
Steve
-
Dec 14, 2005, 04:41 #2
- Join Date
- Jan 2005
- Location
- Outerspace
- Posts
- 511
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I think you would have to work with regExp and do some replacements within the innerHTML some kind of replacing the matched word with the same word surrounded by
PHP Code:<div class="highlight">searched expresssion</div>
HTML Code:.highlight {color:white; background-color:Greenyellow;}
-
Dec 14, 2005, 05:51 #3
- Join Date
- Aug 2005
- Posts
- 254
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hiya, any idea why this code won't do what I need with highlighting search terms?
Code:<script language="javascript" type="text/javascript" > function textSearch() { var listItems = document.getElementsByTagName("li"); var inputText = document.getElementById("formSearchBox"); for (var i=0; i < listItems.length; i++) { // if list item is equal to the search term if (listItems[i].value == inputText.value) { // add a search class .hilite to the list item listItems[i].setAttribute("class", "hilite"); } } } </script>
Steve
-
Dec 14, 2005, 05:56 #4
- Join Date
- Nov 2005
- Location
- Austria
- Posts
- 211
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
because listItems[i].value does not return the content of the li. this ONLY works for form fields.
try listItems[i].innerHTML or listItems[i].firstChild.nodeValueCorinis OpenSource Community & Content Management
http://www.corinis.org
-
Dec 14, 2005, 06:50 #5
- Join Date
- Aug 2005
- Posts
- 254
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
How do I search words within links?
Great this function works well it highlights all the links that are typed in a search box.
What I need to do is break up the words within the links so I can highlight individual terms, any ideas?
I also need to ensure all entered text and link text is lower case.
Code:<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[i].firstChild.nodeValue == inputText.value) { // add a search class .hilite to the list item links[i].setAttribute("class", "hilite"); } } } </script>
Steve
-
Dec 14, 2005, 06:55 #6
- Join Date
- Nov 2005
- Location
- Austria
- Posts
- 211
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
just use
Code:<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[i].firstChild.nodeValue.toLowerCase().indexOf(inputText.value.toLowerCase()) != -1) { // add a search class .hilite to the list item links[i].setAttribute("class", "hilite"); } } } </script>
Corinis OpenSource Community & Content Management
http://www.corinis.org
-
Dec 14, 2005, 07:01 #7
- Join Date
- Aug 2005
- Posts
- 254
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks but I can't this to work do I need something else?
I am using Firefox and the code to trigger this function is
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>
-
Dec 14, 2005, 07:03 #8
- Join Date
- Nov 2005
- Location
- Austria
- Posts
- 211
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I almost though so
just change it to :
Code:// if list item is equal to the search term if (links[i].firstChild.nodeValue.toLowerCase().indexOf(inputText.value.toLowerCase()) != -1) { // add a search class .hilite to the list item links[i].setAttribute("class", "hilite"); } else links[i].setAttribute("class", "");
Corinis OpenSource Community & Content Management
http://www.corinis.org
-
Dec 14, 2005, 08:55 #9
- Join Date
- Aug 2005
- Posts
- 254
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
How do I search words within links?
Sorry I still can't get this to work. It looks like good code though - I am not sure what the problem is.
Steven
-
Dec 14, 2005, 09:20 #10
- Join Date
- Nov 2005
- Location
- Austria
- Posts
- 211
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
it would help if you describe what happens and the code you use right now...
Corinis OpenSource Community & Content Management
http://www.corinis.org
-
Dec 14, 2005, 09:23 #11
- Join Date
- Aug 2005
- Posts
- 254
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hi here it is and nothing happens
<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].setAttribute("class", "hilite");
} else
links[i].setAttribute("class", "");
}
}
}
</script>
Thanks
Steve
-
Dec 14, 2005, 09:27 #12
- Join Date
- Aug 2005
- Posts
- 254
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
If it helps this code works but doesn't highlight individual words - the user needs to type the entire phrase (your version is far better)
<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[i].firstChild.nodeValue == inputText.value) {
// add a search class .hilite to the list item
links[i].setAttribute("class", "hilite");
}
}
}
</script>
Steve
-
Dec 14, 2005, 09:30 #13
- Join Date
- Aug 2005
- Posts
- 254
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Didn't make any difference - I am using Firefox anyway which should be CORE DOM compliant
-
Dec 14, 2005, 09:35 #14
- Join Date
- Nov 2005
- Location
- Austria
- Posts
- 211
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
you getting any error message (oh and use the code tag for code...)
Corinis OpenSource Community & Content Management
http://www.corinis.org
-
Dec 14, 2005, 09:40 #15
- Join Date
- Aug 2005
- Posts
- 254
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
No error message - can't understand it
Steve
-
Dec 14, 2005, 09:51 #16
- Join Date
- Nov 2005
- Location
- Austria
- Posts
- 211
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
try
Code:f (linkText.indexOf(inputText.value.toLowerCase()) != -1) { // add a search class .hilite to the list item links[i].class="hilite"; } else links[i].class="";
Corinis OpenSource Community & Content Management
http://www.corinis.org
-
Dec 15, 2005, 02:57 #17
- Join Date
- Aug 2005
- Posts
- 254
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I am almost there with the function now. I just need a way to only highlight text within links and ignore elements such as spans and images (using the nodeType function).
It didn't work can anyone suggest why?
Thanks
Steve
Code:<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(); // only process text within links if (linkText.nodeType == 3) { 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>
-
Dec 15, 2005, 03:03 #18
- Join Date
- Aug 2005
- Posts
- 254
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Code works fine
This code works fine - thanks for your help
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[i].firstChild.nodeType == 3) {
var linkText = links[i].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[i].className='hilite';
} else {
links[i].className='';
}
}
}
}
</script>
Bookmarks