时间戳

首页 > 解决方案 > 在带有空格的搜索工具中显示

javascript - 在带有空格的搜索工具中显示

问题描述

我使用 javascript为我的 Html 页面（FAQ 问题）添加了一个搜索工具。该代码正在运行，但问题是搜索结果按顺序显示。我的意思是，如果以下问题与搜索中的文本不匹配，则有一个空格，我用于此：

li[i].style.display = "无";

但是空白没有被删除

搜索工具空白

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


    }
}

}

标签： javascripthtml

解决方案

推荐阅读