-1

因此，一段时间以来，我一直在研究搜索功能，Tim Down 帮了我很多，并给了我一个简单的代码来搜索页面中的某些文本。

现在我正在尝试编辑代码以按类别搜索。我将 HTML 表分为以下几个 div。

<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...-->

我的Javascript如下

/*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);
}

如您所见，值属性与 div 中的 id 匹配。选择相应的选项时，我想仅进行JavaScript搜索特定的DIV。不知道如何从这里开始。

我可以使用“in”属性来定义我想在某个类或 id 中搜索吗？类似的东西

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

1 回答 1

-1

除了我使用类而不是 id 之外，HTML 几乎保持不变。

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);
            }
        }
    }
}
于 2012-11-14T16:51:00.573 回答