我使用javascript为我的HTML页面(常见问题)添加了搜索工具。该代码正在运行,但问题是搜索结果按顺序显示。我的意思是,如果以下问题与搜索中的文字不匹配,则存在一个空格,
li [i] .style.display =“ none”;
但是空白不会被删除
HTML代码:
<div class="faq-content" id="faq-content">
<div class="faq-question" id="faq-question">
<input id="q1" type="checkbox" class="panel">
<div class="plus"><label for="q1" class="panel-title">+</label></div>
<label for="q1" class="panel-title" id="panel-title">What is your objective?</label>
<div class="panel-content">An objective is a short statement that clarifies your goals regarding the type of employment desired and how your skills make you a good fit.</div>
</div>
Same code for all the questions
</div>
Javascript:
<script type="text/javascript">
function myFunction() {
var input, filter, ul, li, a, i, f;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("faq-content");
var element = ul.getElementsByTagName("div");
for (f = 0; f < element.length; f++) {
element[f].style.borderBottom= "none";}
li = ul.getElementsByTagName("label");
for (i = 0; i < li.length; i++) {
a = li[i];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1){
li[i].style.display = "";
}
else {
li[i].style.display = "none";
}
}
}