用JavaScript搜索類別

-1

所以我一直在搜索功能上工作了很長時間Tim Down helped我很多，並給了我一個簡單的代碼來搜索頁面的某些文本。用JavaScript搜索類別

現在我試圖編輯代碼按類別搜索。我已經把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); 
}

正如你所看到的，價值屬性匹配了在申報單的ID。我想在選擇相應的選項時僅使用javascript搜索特定的div。不知道如何從這裏開始。

我可以使用「in」屬性來定義我想要在某個類或ID中進行搜索嗎？東西沿着

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

來源

2012-11-05 daniella

你能給你的具體問題的更多細節？和[你有什麼嘗試]（http://mattgemmell.com/2008/12/08/what-have-you-tried/）？ StackOverflow不是在這裏編寫代碼，而是爲了幫助你解決_specific_問題。 –

@DavidPärsson嗯，我試着編輯window.find和document.body以從某些ID選擇：window.getElementById（「title」）或document.body.getElementById（「title」），但它總是結束破壞代碼。具體來說，我需要它從特定的div中搜索單詞。我可以從那裏弄清楚。 – daniella

-1

感謝沒什麼線....我想通了我自己

萬一別人是想知道類似的解決方案在這裏我就是這樣做的。

除了我用class而不是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-14 16:51:00 daniella

用JavaScript搜索類別

回答

相關問題