title: How to show a response when filtering through a list of elements using javascript
body: <p>Hello I am creating an FAQ page that has to be filtered using javascript as below</p>
  <p><strong>Credit : <a href="https://makitweb.com/jquery-search-text-in-the-element-with-contains-selector/" rel="nofollow noreferrer">https://makitweb.com/jquery-search-text-in-the-element-with-contains-selector/</a></strong></p>
  <pre><code>$(document).ready(function () {
    $('#filter').keyup(function () {
  
      // Search text
      var text = $(this).val().toLowerCase();
      var error = document.getElementById(&quot;error&quot;);
  
      // Hide all content class element
      $('.mobrog-ux-text').hide();
  
      // Search 
      $('.mobrog-ux-text').each(function () {
  
  
        if ($(this).text().toLowerCase().indexOf(&quot;&quot; + text + &quot;&quot;) != -1) {
          $(this).closest('.mobrog-ux-text').show();
          setTimeout(
            function () {
              var x = document.getElementById(&quot;myDIV&quot;);
              x.style.display = &quot;none&quot;;
  
            }, 4000);
     
          error.style.display = &quot;none&quot;;
        }
  
  else if($(this).text().toLowerCase().indexOf(&quot;&quot; + text + &quot;&quot;) == 0) {
  
        error.style.display = &quot;block&quot;;
  }
  
      });
    });
  });
  
  &lt;form align=&quot;center&quot;&gt;
          &lt;input id=&quot;filter&quot; onkeydown=&quot;keydownFunction()&quot; oninput=&quot;keyPress(this.value)&quot; class=&quot;searchfield&quot; type=&quot;text&quot;
            name=&quot;search&quot; placeholder=&quot;Search the help center&quot;&gt;
        &lt;/form&gt;
  
        &lt;div style=&quot;color: white;padding : 10px&quot; align=&quot;center&quot;&gt;&lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div class=&quot;content2&quot;&gt;
        &lt;h2&gt;Frequently asked questions&lt;/h2&gt;
        &lt;div id&quot;pag&quot;=&quot;id&quot; pag&quot;&quot;=&quot;pag&quot; &quot;&quot;&gt;&lt;/div&gt;
  
        &lt;div align=&quot;center&quot; class=&quot;col-10&quot;&gt;
          &lt;div class=&quot;mobrog-tab-container maxwidth&quot;&gt;
  
            &lt;div id=&quot;myDIV&quot; class=&quot;loader&quot;&gt;&lt;/div&gt;
  
            &lt;div class=&quot;error&quot; id=&quot;error&quot;&gt; No result found!!&lt;/div&gt;
            &lt;div id=&quot;results&quot; class=&quot;mobrog-ux-vertical-tabs&quot;&gt;
              &lt;div id=&quot;tar&quot; class=&quot;mobrog-tabs&quot;&gt;
                &lt;button data-tab=&quot;tab1&quot; class=&quot;active&quot;&gt;sample tab button?&lt;span&gt;&lt;/span&gt;&lt;/button&gt;
            
  
                &lt;button class=&quot;empty&quot;&gt;&lt;/button&gt;
              &lt;/div&gt;
              &lt;div class=&quot;mobrog-maincontent&quot;&gt;
                &lt;div data-tab=&quot;tab1&quot; class=&quot;mobrog-tabcontent active&quot;&gt;
  
                  &lt;div class=&quot;mobrog-ux-text&quot;&gt;
                    &lt;button class=&quot;mobrog-accordion&quot;&gt;sample button&lt;/button&gt;
                    &lt;div class=&quot;mobrog-panel&quot;&gt;
                      &lt;p&gt;
                      sample text
                      &lt;/p&gt;
                      
                    &lt;/div&gt;
  
                  &lt;/div&gt;
  </code></pre>
  <p>Which works, but then I am trying to show a message when the filtered word is not found within the list of DIVS I'm searching through on my FAQ page</p>
  <p>I tried the below with</p>
  <pre><code>  else if ($(this).text().toLowerCase().indexOf(&quot;&quot; + text + &quot;&quot;) == 0) {
  //error message display
  
  }
  </code></pre>
  <p>But then it does not work</p>
  <p><strong>(e.g when I type in a word which does not exist within my FAQ I want to display an error message which is in a div) and vice versa when the word is found in my FAQ page)</strong></p>
  <p>like the way its been used in the method of RegExp
  <strong><a href="https://stackoverflow.com/questions/44736054/live-search-on-an-div-with-input-filter">Live search on an Div with input filter</a></strong></p>
  <p><strong>at the moment when I type in available and unavailable words the error message appears</strong></p>
  <p>Please how do I effectively display a message when a filtered word is found or not found</p>
  <p>Thanks</p>