如何在使用JavaScript筛选元素列表时显示响应

Question

你好，我正在创建一个FAQ页面，需要使用JavaScript进行过滤，如下所示：

参考资料：https://makitweb.com/jquery-search-text-in-the-element-with-contains-selector/

$(document).ready(function () {
  $('#filter').keyup(function () {

    // Search text
    var text = $(this).val().toLowerCase();
    var error = document.getElementById("error");

    // Hide all content class element
    $('.mobrog-ux-text').hide();

    // Search 
    $('.mobrog-ux-text').each(function () {


      if ($(this).text().toLowerCase().indexOf("" + text + "") != -1) {
        $(this).closest('.mobrog-ux-text').show();
        setTimeout(
          function () {
            var x = document.getElementById("myDIV");
            x.style.display = "none";

          }, 4000);
   
        error.style.display = "none";
      }

else if($(this).text().toLowerCase().indexOf("" + text + "") == 0) {

      error.style.display = "block";
}

    });
  });
});

<form align="center">
        <input id="filter" onkeydown="keydownFunction()" oninput="keyPress(this.value)" class="searchfield" type="text"
          name="search" placeholder="Search the help center">
      </form>

      <div style="color: white;padding : 10px" align="center"></div>

    </div>

    <div class="content2">
      <h2>Frequently asked questions</h2>
      <div id"pag"="id" pag""="pag" ""></div>

      <div align="center" class="col-10">
        <div class="mobrog-tab-container maxwidth">

          <div id="myDIV" class="loader"></div>

          <div class="error" id="error"> No result found!!</div>
          <div id="results" class="mobrog-ux-vertical-tabs">
            <div id="tar" class="mobrog-tabs">
              <button data-tab="tab1" class="active">sample tab button?<span></span></button>
          

              <button class="empty"></button>
            </div>
            <div class="mobrog-maincontent">
              <div data-tab="tab1" class="mobrog-tabcontent active">

                <div class="mobrog-ux-text">
                  <button class="mobrog-accordion">sample button</button>
                  <div class="mobrog-panel">
                    <p>
                    sample text
                    </p>
                    
                  </div>

                </div>

这个方法可以实现过滤，但当筛选的单词没有在FAQ页面搜索的DIV列表中找到时，我想显示一条消息。

我尝试了下面的代码：

  else if ($(this).text().toLowerCase().indexOf("" + text + "") == 0) {
//error message display

}

但是它不起作用了

(例如，当我键入一个在我的FAQ中不存在的单词时，我希望显示一个在

中的错误消息)，反之亦然，当单词在我的FAQ页面中找到时)

方式类似于RegExp方法中的使用方式 使用输入过滤器在div上进行实时搜索

目前，当我键入可用和不可用的单词时，错误消息会出现

请问我该如何有效地显示过滤的单词是否已找到或未找到的消息

谢谢

- famakin taiwo

---

谢谢你提醒我，我已经调整了描述@Wyck - famakin taiwo

当我输入可用和不可用的单词时，会出现错误消息。这个问题的描述非常简短。我知道你知道发生了什么，但我们从这里无法看到。尤其重要的是要进行描述，因为您的示例不是一个自包含的独立演示（需要jquery和未知标记）。也许把它们都放在可运行的片段中？ - Wyck

我认为你最大的问题是如果没有任何结果匹配，就会显示错误。我建议在循环之外设置一个变量（初始值为false），然后在任何匹配时将其设置为true。循环结束后，您可以使用此变量来显示/隐藏错误。 - Rylee

谢谢@Rylee，我按照您的指示做了，确实起作用了。为了其他可能遇到此问题的人，请您把您的解释变成一个答案，这样我就可以投票了。谢谢。 - famakin taiwo

Answer 1

进一步解释我的评论，这是一个示例，说明您如何实现类似的功能。

再次强调 - 主要问题在于，如果任何结果不匹配，就会显示错误，而不是显示没有匹配

为了解决这个问题，我们可以在循环外添加一个变量来确定是否匹配了任何结果

$(document)
    .ready(function () {
        $('#filter')
            .keyup(function () {
                // Search text
                var text  = $(this).val().toLowerCase();
                var error = document.getElementById("error");
                
                // storing this in a variable will reduce how many times you call the function
                var $ux_texts = $('.mobrog-ux-text');

                // Hide all content class element
                $ux_texts.hide();
                
                // variable to update if any match is found
                var has_match = false;

                // Search 
                $ux_texts
                    .each(function () {
                        var $this = $(this);
                        if ($this.text().toLowerCase().indexOf("" + text + "") === -1) {
                            // flip the logic so we can return early - makes for cleaner code
                            return;
                        }

                        $this.closest('.mobrog-ux-text').show();
                        setTimeout(function () {
                            var x = document.getElementById("myDIV");
                            x.style.display = "none";
                        }, 4000);

                        has_match = true;
                    });

                // error handling
                if (has_match) {
                    error.style.display = "none";
                } else {
                    error.style.display = "block";
                }
            });
    });

- Rylee