Question

所以我已经在搜索功能上工作了很长时间Tim Down helped我很多，并给了我一个简单的代码来搜索页面中的某些文字。

现在我正在尝试编辑代码以按类别搜索。我把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"));}

Answer 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);
            }
        }
    }
}

使用javascript按类别搜索

1 个答案: