在带有空白的搜索工具中显示

时间:2018-10-04 06:54:02

标签: javascript html

我使用javascript为我的HTML页面(常见问题)添加了搜索工具。该代码正在运行,但问题是搜索结果按顺序显示。我的意思是,如果以下问题与搜索中的文字不匹配,则存在一个空格,

  

li [i] .style.display =“ none”;

但是空白不会被删除

Search tools white space

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";


    }
}

}

0 个答案:

没有答案