Question

我目前正在尝试创建一个搜索功能，从搜索结果中选择一个特定的div并将其从隐藏中切换。

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

<!DOCTYPE html>
<html lang="en">
<script src="../jquery-3.3.1.min.js"></script>
<html>
<head>   
<script>
function SearchBarFunction() {
document.getElementById("SearchBarDropdown").classList.toggle("show");

}  */ This will hide the container holding the answer/*
$(document).ready (function(){
$("#LTT-Area").hide()
}); 
             */ This is the search function */
function filterFunction() {
var input, filter, ul, li, a;
input = document.getElementById("SearchBarInput");
filter = input.value.toUpperCase();
div = document.getElementById("SearchBarDropdown");
a = div.getElementsByTagName("a");
for (i = 0; i < a.length; i++) {
if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
  a[i].style.display = "";
} else {
  a[i].style.display = "none";
   }
  } 
 }


             */ This is the work in-progress code to show the value */
var txt = $('#SearchBarDropdown').val();
 $('SearchBarInput').each(function(){
   if($(this).text().toUpperCase().indexOf(txt.toUpperCase()) !=-1){
     $(this).show();
   }
});
</script>
</head>
<body>

<div id="main_answer">           
  <button onclick="SearchBarFunction()" class="dropbtn">Search</button>
    <div id="SearchBarDropdown" class="dropdown-content">   
     <input type="text" placeholder="Search.." id="SearchBarInput" 
       onkeyup="filterFunction()">

     <a href="#answer1">Why doesnt this work?</a>
    </div>
</div>
<div id="LTT-Area">
  <div id="answer1"><h2>Why doesnt this work?</h2><a>This doesn't work 
 because it is broken</a>
  </div>
</div>
</body>
</html>

我正在使用锚点在页面上找到答案，但我将答案设置为已准备就绪的doc。我遇到的问题是创建一个搜索功能，它会按顺序显示隐藏的答案，然后找到锚点。

感谢您抽出宝贵时间查看。

JQuery搜索功能在同一页面上显示隐藏结果

0 个答案: