How to show a response when filtering through a list of elements using javascript

user_12318586 0
Viewed 77

Hello I am creating an FAQ page that has to be filtered using javascript as below

Credit : 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>

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

I tried the below with

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

}

But then it does not work

(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)

like the way its been used in the method of RegExp Live search on an Div with input filter

at the moment when I type in available and unavailable words the error message appears

Please how do I effectively display a message when a filtered word is found or not found

Thanks

css html javascript
1 Answers

Expanding on my comment, this is an example of how you could implement something like this.

To reiterate - the main problem was that the error was being shown if any result didn't match instead of showing if none match

To fix that, we can add a variable outside the loop to determine if any result was matched

$(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";
                }
            });
    });
user_100863520
Related