ค้นหาตามหมวดหมู่ด้วยจาวาสคริปต์

ดังนั้นฉันจึงเปิดและปิดฟังก์ชันการค้นหามาระยะหนึ่งแล้ว Tim Down ช่วยได้ ฉันมากและให้โค้ดง่ายๆ แก่ฉันเพื่อค้นหาข้อความบางอย่างในหน้านั้น

ตอนนี้ฉันกำลังพยายามแก้ไขโค้ดเพื่อค้นหาตามหมวดหมู่ ฉันมีตาราง HTML แบ่งออกเป็น divs ดังนี้

<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 ฉันต้องการให้จาวาสคริปต์ค้นหาเฉพาะ div เฉพาะเมื่อเลือกตัวเลือกที่เกี่ยวข้อง ไม่แน่ใจว่าจะไปจากที่นี่ได้อย่างไร

ฉันสามารถใช้คุณสมบัติ "ใน" เพื่อกำหนดว่าฉันต้องการค้นหาในคลาสหรือรหัสที่ต้องการได้หรือไม่ บางสิ่งบางอย่างตามแนวของ

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

javascript html dom
person daniella    schedule 05.11.2012    source แหล่งที่มา
comment
คุณช่วยให้รายละเอียดเพิ่มเติมเกี่ยวกับปัญหาเฉพาะของคุณได้ไหม และ คุณได้ลองอะไรไปแล้ว StackOverflow ไม่ได้อยู่ที่นี่เพื่อเขียนโค้ดของคุณ แต่เพื่อช่วยคุณแก้ไขปัญหา เฉพาะ   -  person David Pärsson    schedule 05.11.2012
comment
@David Pärsson ฉันพยายามแก้ไข window.find และ document.body เพื่อเลือกจากรหัสบางอย่าง: window.getElementById(title) หรือ document.body.getElementById(title) แต่สุดท้ายมันก็ทำให้โค้ดพังเสมอ โดยเฉพาะอย่างยิ่ง ฉันต้องการมันเพื่อค้นหาคำจาก div ที่เฉพาะเจาะจง ฉันสามารถคิดได้จากที่นั่น   -  person daniella    schedule 05.11.2012

คำตอบ (1)


arrow_upward
-1
arrow_downward

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);
            }
        }
    }
}
person daniella    schedule 14.11.2012