-1

それで、私はしばらく検索機能に取り組んできましたが、ティム・ダウンは私を大いに助け、特定のテキストをページで検索するための簡単なコードをくれました。

今、コードを編集してカテゴリ別に検索しようとしています。次のように、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);
}

ご覧のとおり、value 属性は div の ID と一致しています。対応するオプションが選択されているときに、JavaScript が特定の div のみを検索するようにしたいと思います。ここから先はどうなるかわかりません。

「in」プロパティを使用して、特定のクラスまたは ID で検索することを定義できますか? の線に沿った何か

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

1 に答える 1

-1

ID の代わりにクラスを使用したことを除いて、HTML はほとんど同じままでした。

ジャバスクリプト

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 に答える