Question

So I’ve been working on and off on a search function for awhile Tim Down helped me a lot and gave me a simple code to search the page for certain text.

Now I’m trying to edit the code to search by category. I’ve got the HTML table divided into divs as follows.

<form id="f1" name="f1" action="javascript:void(0)" onsubmit="searchpage()" >
    <input id="t1" type="text" name="t1" />
    <select name="category" id="category">
        <option>all</option>
        <option value="name">Title</option>
        <option value="author">Author</option>
        <option value="year">Year</option>
        <option value="publisher">Publisher</option>
    </select>
    <input id="button" type="submit" value="SEARCH" name="b1" onclick="searchpage()" />
</form>

<tr>

<td>
<div id="name">
<div id="title">
title 1
</div>
extra content
</div>
</td>

<td>
<div id="author">
author 1
</div>
</td>

<td>
<div id="year">
2000
</div>
</td>

<td>
<div id="publisher">
publisher 1
</div>
</td>

<td>
<div id="notes">
notes 1
</div>
</td>

</tr>
<!--etc...-->

My Javascript is as follows

/*these two variables select the value attribute of each option in the dropbox*/
var cat=document.getElementById("category").selectedIndex;
var catid=document.getElementsByTagName("option")[cat].value;

function doSearch(text) {
    var sel;
    if (window.find && window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount > 0) {
        sel.collapseToEnd();
        }
        window.find(text);
    } else if (document.selection && document.body.createTextRange) {
        sel = document.body.selection;
        var textRange;
        if (sel.type == "Text") {
            textRange = sel.createRange();
            textRange.collapse(false);
        } else {
            textRange = document.body.createTextRange();
            textRange.collapse(true);
        }
        if (textRange.findText(text)) {
            textRange.select();
        }
    }
}

function searchpage() {
    doSearch(document.getElementById("t1").value);
}

As you can see, the value attributes match up with the ids in the divs. I’d like to make the javascript search only specific divs when the corresponding option is selected. Not sure how to go about it from here.

Can I use the “in” property to define that I want to search in a certain class or id?
something along the lines of

doSearch(document.getElementById("t1").value in document.getElementsByClassName("name"));}

Answer 1

The HTML pretty much stayed the same except I used classes instead of ids.

JAVASCRIPT

function doSearch(text) {
var catclass = document.getElementById("category").options;    
var sel;
var classname;
var catselect;
if (window.find && window.getSelection) {
    sel = window.getSelection();
    window.find(text);
    var classname = sel.anchorNode.parentElement.className;
    var catselect = catclass[document.getElementById("category").selectedIndex].text;
    while (classname !== catselect) {
        if (sel.rangeCount > 0) {
            if (sel.anchorNode.parentElement.className == catclass[document.getElementById("category").selectedIndex].text) {
                break;
            }
            else {
                doSearch(text);
            }
        }
    }
}