CODEWITHSUNDEEP
javascriptjqueryhtml
Slowboy
Slowboy

Reputation: 601

displaying messages in div when jquery filter returns no result

I'm trying to implement an if/else statement to a Jquery Code snippet I have.

Since I'm very inexperienced javascript/Jquery user I'm having problems finding out were I should add the if/else.

As the snippet is now, it shows a div if there is a match and if there is no match it shows nothing. I want it to show messages when it find no match.

  $("#studyselector").change(function(){
var selectItem = $(this).val().toLowerCase();
filter(selectItem);
});

function filter(e) {

  var regex = new RegExp('\\b\\w*' + e + '\\w*\\b');
        $('.listItem').hide().filter(function () {
      return regex.test($(this).data('name').toLowerCase())
  }).show();
}

here is a link to a working jsfiddle

$("#studyselector").change(function(){
  var selectItem = $(this).val();
  filter(selectItem);
});
function filter(e) {
    var regex = new RegExp('\\b\\w*' + e + '\\w*\\b');
        $('.listItem').hide().filter(function () {
        return regex.test($(this).data('name'))
    }).show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="studyselector">
    <option value="everything">everything</option>
     <option value="science">science</option>
     <option value="nature">nature</option>
     <option value="arts">arts</option>
  </select>

<div id="listSelection">

<div class="listItem" data-name="science, nature" >
  <h3>Science Collection</h3>
  <span class="fieldstudy">science, stars, something</span>
  <p>Science and stuff </p>
  <p>Databases: Science Global, Science Dateline, Science Trade and Industry, Science Archive</p>
</div>

<div class="listItem" data-name="nature"  >
  <h3>Academic Search DB</h3>
  <span class="fieldstudy">everything</span>
  <p>All Studies </p>
    <p>  1000 references  </p>
    <p>  Texts from 4500 magazines and 1000 peer previewed articles</p>
</div>

<div class="listItem" data-name="arts" >
  <h3>Nature Science</h3>
  <span class="fieldstudy">nature, science</span>
  <p>All Studies </p>
    <p>  Nature and more  </p>
    <p>  6000 natur articles and 1000 peer previewed articles</p>
</div>

</div>

Upvotes: 1

Views: 2325

Answers (3)

mplungjan
mplungjan

Reputation: 178094

You need to show a message but also show all when everything is selected

Here I toggle a message if the filter resulted in nothing visible.

I ALSO initialise to show whatever is selected when the page loads AND allow the everything to show everything after another selection is made

$("#studyselector").change(function() {
  var selectItem = $(this).val();
  if (selectItem == "everything") $('.listItem').show();
  else filter(selectItem);
  $("#message").toggle($('.listItem:visible').length === 0);
}).change();

function filter(e) {
  var regex = new RegExp('\\b\\w*' + e + '\\w*\\b');
  $('.listItem').hide().filter(function() {
    return regex.test($(this).data('name'))
  }).show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="studyselector">
  <option value="everything">everything</option>
  <option value="science">science</option>
  <option value="nature">nature</option>
  <option value="arts">arts</option>
  <option value="nothing">nothing</option>
</select>

<div id="listSelection">

  <div class="listItem" data-name="science, nature">
    <h3>Science Collection</h3>
    <span class="fieldstudy">science, stars, something</span>
    <p>Science and stuff </p>
    <p>Databases: Science Global, Science Dateline, Science Trade and Industry, Science Archive</p>
  </div>

  <div class="listItem" data-name="nature">
    <h3>Academic Search DB</h3>
    <span class="fieldstudy">everything</span>
    <p>All Studies </p>
    <p> 1000 references </p>
    <p> Texts from 4500 magazines and 1000 peer previewed articles</p>
  </div>

  <div class="listItem" data-name="arts">
    <h3>Nature Science</h3>
    <span class="fieldstudy">nature, science</span>
    <p>All Studies </p>
    <p> Nature and more </p>
    <p> 6000 natur articles and 1000 peer previewed articles</p>
  </div>
  <div id="message">Nothing found</div>
</div>

Upvotes: 1

khofaai
khofaai

Reputation: 1357

You can add this :

// bottom filter function

if($("#listSelection").children(":visible").length == 0) {
  $(".empty").show();
} else {
  $(".empty").hide();
}

.empty just class for html element that hold empty message, here a jsfiddle example, based on your code

Upvotes: 2

iPraxa Inc
iPraxa Inc

Reputation: 556

Please Try This:-

Add Html:-

<div class="error" style="display: none;">Not Found</div>

Js:-

$("#studyselector").change(function(){
    var selectItem = $(this).val();
    filter(selectItem);
  });
  function filter(e) {
      var regex = new RegExp('\\b\\w*' + e + '\\w*\\b');
            $('.listItem').hide().filter(function () {
          return regex.test($(this).data('name'))          
      }).show();

      if($('.listItem:visible').length===0){
        $('.error').show();
      }else{
        $('.error').hide();
      }
  }

Upvotes: 3

Related Questions