Question

我有一个非常长的html文件（20K +行），我希望搜索找到搜索词，然后滚动到li class="page" data-name="XX"。如果找到该术语的多个实例，我们需要一个＆＃34; next＆＃34;结果按钮。

以下是我要搜索的HTML文件的摘录：

  <li class="page" data-name="11">
<div class="pageResizer" style="width:640px;height:960px;">&nbsp;</div>
<div id="item690" class="pageItem" alt="Rectangle">&nbsp;</div>
<div id="item728" class="pageItem" alt="Rectangle">&nbsp;</div><button class="pageItem" alt="Home" id="item1426" data-id="1426" onclick="nav.to(5);">&nbsp;</button><button class="pageItem" alt="prevBtn" id="item1423" data-id="1423" onclick="nav.back(this);">&nbsp;</button><button class="pageItem" alt="nextBtn" id="item2550" data-id="2550" onclick="nav.next(this);">&nbsp;</button><img src="assets/images/blank.gif" class="pageItem" alt="Rectangle" style="left:491px;top:11px;" data-src="assets/images/item_2757.png"/>
<div id="item2788" class="pageItem singleline" alt="Lafayette Chamber">
  <p class="autoParaStyle1">Lafayette Chamber</p>
</div><button class="pageItem" alt="Share" id="item3136" data-id="3136">&nbsp;</button>
<a href="javascript:nav.to(2);"><button class="pageItem" alt="Help" id="item2977" data-id="2977" onclick="nav.to(2);">&nbsp;</button>
</a><img src="assets/images/blank.gif" class="pageItem" alt="Rectangle" style="left:1px;top:66px;" data-src="assets/images/item_4899.jpg"/><img src="assets/images/blank.gif" class="pageItem" alt="Rectangle" style="left:1px;top:707px;" data-src="assets/images/item_4901.jpg"/>
<div id="item4906" class="pageItem singleline" alt="lafayETTE ">
  <p class="autoParaStyle13">lafayETTE<br />
  </p>
</div>
<div id="item4937" class="pageItem singleline" alt="HISTORY">
  <p class="autoParaStyle14">HISTORY</p>
</div>
<div id="item4982" class="pageItem" alt=" little more than a century ago, the first pioneers trickled into this region after a long journey across the Great P...">
  <p class="Article-Body"> <span class="autoCharStyle5">little more than a century ago, the first pioneers trickled into this region after a long journey across the Great Plains.  The gold rush attracted more and more adventurous fortune seekers who were closely followed by other settlers.  The honeymoon of Lafayette and Mary E. Miller was spent crossing the plains and arriving in the Boulder region.  In 1863, they started farming the Burlington (Longmont) area and soon moved south and settled in the present site of Lafayette.  Lafayette Miller was an industrious man and besides farming, he operated the stage stop and ran several meat markets.  His sudden death in 1878 left Mary Miller with six small children to raise.  She did this and more…she raised a town!<br /></span>      </p>
  <p class="autoParaStyle8"><br /></p>
</div>
<div id="item27143" class="pageItem singleline" alt="A">
  <p class="autoParaStyle15">A</p>
</div>

这是我到目前为止的代码：

<script>
function search() {

var name = document.getElementById("searchForm").elements["searchItem"].value;
var pattern = name.toLowerCase();
var targetId = "";

var divs = document.getElementsByClassName("page");
for (var i = 0; i < divs.length; i++) {
  var para = divs[i].getElementsByTagName("p");
  var index = para[0].innerText.toLowerCase().indexOf(pattern);
  if (index != -1) {
     targetId = divs[i].parentNode.id;
     document.getElementById(targetId).scrollIntoView();
     break;
  }
}  
}
</script>

<form id="searchForm" action="javascript:search();">
<div class="input-group">
  <button id="go"  type="button" 
          onclick="document.getElementById('searchForm').submit(); return false;">
  Search</button>
  <input type="text" id="searchItem" class="form-control" placeholder="Search" cols="50" rows="2">
</div>
</form>

我不确定我的代码需要做什么来完成这项工作，并且不知道如何制作下一个结果＆＃34;按钮。

Answer 1

我认为这就是你要找的东西：

HTML：

<body>
  <form id="searchForm" action="javascript:search();" class="form">
    <button id="nextButton" onclick="nextItem()" type="button" class="make-invisible">NEXT</button>
    <div class="input-group">
      <button id="go">Search</button>
      <input type="text" id="searchItem" name="searchItem" class="form-control" placeholder="Search" cols="50" rows="2">
    </div>
  </form>
  <ul>
    <li class="page" data-name="foo">Has data-name = foo</li>
    <li class="page" data-name="foo">Has data-name = foo</li>
    ...
  </ul>
</body>

JavaScript的：

var selectedItems;
var currentlySelectedItem;
var makeInvisibleClassName = "make-invisible";
var nextButton = document.querySelector("#nextButton");

function search() {
  makeInvisible();
  var searchPhrase = document.querySelector("#searchItem").value;
  selectedItems = document.querySelectorAll(".page[data-name='" + searchPhrase + "']");
  if (selectedItems.length === 0) {
    return;
  }
  if (selectedItems.length > 1) {
    makeVisible();
  }
  currentlySelectedItem = 0;
  nextItem();
}

function nextItem() {
  selectedItems[currentlySelectedItem].scrollIntoView();
  currentlySelectedItem++;
  if (currentlySelectedItem >= selectedItems.length) {
    currentlySelectedItem = 0;
  }
}

//////////
function makeInvisible() {
  nextButton.classList.add(makeInvisibleClassName);
}

function makeVisible() {
  nextButton.classList.remove(makeInvisibleClassName);
}

CSS：

.form {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

#nextButton {
  margin-right: 10px;
}

.make-invisible {
  display: none;
}

这是工作Demo

好的，让我解释一下我在这里做了什么如果您有表格，实际上并不需要这样：

<button id="go" type="button" onclick="document.getElementById('searchForm').submit(); return false;">

相反，你可以非常简单：

<button id="go">Search</button>

表单中的默认按钮类型为type="submit"，它会自动触发action属性中指定的事件。

接下来是NEXT按钮。我对其进行了硬编码，为了显示和隐藏它，我将添加或删除类make-invisible。请注意，按钮在开头是不可见的。它还有一个点击事件，会触发nextItem()

<button id="nextButton" onclick="nextItem()" type="button" class="make-invisible">NEXT</button>

我还制作了两个全局变量：selectedItems，它将存储所选项目的数组，以及currentlySelectedItem，它具有当前滚动到项目的索引。

search()函数获取具有类名page且具有指定单词的属性data-name的所有元素。然后它检查是否有多个结果。如果是这样，它会使按钮可见。

nextItem()函数滚动到所选元素，并将索引加1。如果索引值如果更大则存在匹配元素，则它将开始循环。

HTML页面搜索

1 个答案: