Mixing
Filtering elements, if no results display this
1
I am filtering out some elements based on what is in their data-attribute and I want to display some HTML if there are no results. I'm not very knowledgeable about JS/jQuery so I can't quite think through how to accomplish that. I'd appreciate it if someone could point me in the right direction. Here is the jQuery:
$("#filter").keyup(function() {
var selectSize = $(this).val();
filter(selectSize);
});
function filter(e) {
var numVisible = 0;
var addCard = $('.ourTeamCards');
if(e) {
var regex = new RegExp('\b\w*' + e + '\w*\b', 'i');
$('.oneStaff').fadeOut(50).filter(function () {
var regExists = regex.test($(this).data('regions'));
if(regExists) {
numVisible +=1;
}
return regExists;
}).fadeIn(50);
} else {
$('.oneStaff').fadeIn(50);
}
if(numVisible == 0) {
addCard.append("<div class='noResults'>No Results</div>");
}
else {
$('.noResults').css('display', 'none');
}
}
Here is a pen with a working example: https://codepen.io/west4me/pen/dQZxMZ
If you search for Wyoming you will see it filter. If you search for Washington you wont get any results. If there are no results I would like to append some HTML/Text saying there are no results.
javascript jquery
asked Nov 20 '18 at 13:12
William CunninghamWilliam Cunningham
154112
|
show 12 more comments
1
I am filtering out some elements based on what is in their data-attribute and I want to display some HTML if there are no results. I'm not very knowledgeable about JS/jQuery so I can't quite think through how to accomplish that. I'd appreciate it if someone could point me in the right direction. Here is the jQuery:
$("#filter").keyup(function() {
var selectSize = $(this).val();
filter(selectSize);
});
function filter(e) {
var numVisible = 0;
var addCard = $('.ourTeamCards');
if(e) {
var regex = new RegExp('\b\w*' + e + '\w*\b', 'i');
$('.oneStaff').fadeOut(50).filter(function () {
var regExists = regex.test($(this).data('regions'));
if(regExists) {
numVisible +=1;
}
return regExists;
}).fadeIn(50);
} else {
$('.oneStaff').fadeIn(50);
}
if(numVisible == 0) {
addCard.append("<div class='noResults'>No Results</div>");
}
else {
$('.noResults').css('display', 'none');
}
}
Here is a pen with a working example: https://codepen.io/west4me/pen/dQZxMZ
If you search for Wyoming you will see it filter. If you search for Washington you wont get any results. If there are no results I would like to append some HTML/Text saying there are no results.
javascript jquery
asked Nov 20 '18 at 13:12
William CunninghamWilliam Cunningham
154112
Create a working example (snippet) with the relevant code so it will be possible to understand what you are doing and what is the issue.
– Dekel
Nov 20 '18 at 13:13
@Dekel I added a Codepen with a working example.
– William Cunningham
Nov 20 '18 at 13:29
and where is your code that in charge of displaying "there are no results"?
– Dekel
Nov 20 '18 at 13:30
@Dekel That's what I am trying to figure out how to add. I added some HTML with display:none, not sure if that is what you are looking for or not.
– William Cunningham
Nov 20 '18 at 14:00
ok, so you added that element and it's hidden. I don't see any attempt to display it.
– Dekel
Nov 20 '18 at 14:28
|
show 12 more comments
1
1
1
I am filtering out some elements based on what is in their data-attribute and I want to display some HTML if there are no results. I'm not very knowledgeable about JS/jQuery so I can't quite think through how to accomplish that. I'd appreciate it if someone could point me in the right direction. Here is the jQuery:
$("#filter").keyup(function() {
var selectSize = $(this).val();
filter(selectSize);
});
function filter(e) {
var numVisible = 0;
var addCard = $('.ourTeamCards');
if(e) {
var regex = new RegExp('\b\w*' + e + '\w*\b', 'i');
$('.oneStaff').fadeOut(50).filter(function () {
var regExists = regex.test($(this).data('regions'));
if(regExists) {
numVisible +=1;
}
return regExists;
}).fadeIn(50);
} else {
$('.oneStaff').fadeIn(50);
}
if(numVisible == 0) {
addCard.append("<div class='noResults'>No Results</div>");
}
else {
$('.noResults').css('display', 'none');
}
}
Here is a pen with a working example: https://codepen.io/west4me/pen/dQZxMZ
If you search for Wyoming you will see it filter. If you search for Washington you wont get any results. If there are no results I would like to append some HTML/Text saying there are no results.
javascript jquery
asked Nov 20 '18 at 13:12
William CunninghamWilliam Cunningham
154112
I am filtering out some elements based on what is in their data-attribute and I want to display some HTML if there are no results. I'm not very knowledgeable about JS/jQuery so I can't quite think through how to accomplish that. I'd appreciate it if someone could point me in the right direction. Here is the jQuery:
$("#filter").keyup(function() {
var selectSize = $(this).val();
filter(selectSize);
});
function filter(e) {
var numVisible = 0;
var addCard = $('.ourTeamCards');
if(e) {
var regex = new RegExp('\b\w*' + e + '\w*\b', 'i');
$('.oneStaff').fadeOut(50).filter(function () {
var regExists = regex.test($(this).data('regions'));
if(regExists) {
numVisible +=1;
}
return regExists;
}).fadeIn(50);
} else {
$('.oneStaff').fadeIn(50);
}
if(numVisible == 0) {
addCard.append("<div class='noResults'>No Results</div>");
}
else {
$('.noResults').css('display', 'none');
}
}
Here is a pen with a working example: https://codepen.io/west4me/pen/dQZxMZ
If you search for Wyoming you will see it filter. If you search for Washington you wont get any results. If there are no results I would like to append some HTML/Text saying there are no results.
javascript jquery
javascript jquery
asked Nov 20 '18 at 13:12
William CunninghamWilliam Cunningham
154112
asked Nov 20 '18 at 13:12
William CunninghamWilliam Cunningham
154112
edited Nov 20 '18 at 15:21
William Cunningham
asked Nov 20 '18 at 13:12
William CunninghamWilliam Cunningham
154112
asked Nov 20 '18 at 13:12
William CunninghamWilliam Cunningham
154112
asked Nov 20 '18 at 13:12
William CunninghamWilliam Cunningham
154112
154112
Create a working example (snippet) with the relevant code so it will be possible to understand what you are doing and what is the issue.
– Dekel
Nov 20 '18 at 13:13
@Dekel I added a Codepen with a working example.
– William Cunningham
Nov 20 '18 at 13:29
and where is your code that in charge of displaying "there are no results"?
– Dekel
Nov 20 '18 at 13:30
@Dekel That's what I am trying to figure out how to add. I added some HTML with display:none, not sure if that is what you are looking for or not.
– William Cunningham
Nov 20 '18 at 14:00
ok, so you added that element and it's hidden. I don't see any attempt to display it.
– Dekel
Nov 20 '18 at 14:28
|
show 12 more comments
Create a working example (snippet) with the relevant code so it will be possible to understand what you are doing and what is the issue.
– Dekel
Nov 20 '18 at 13:13
@Dekel I added a Codepen with a working example.
– William Cunningham
Nov 20 '18 at 13:29
and where is your code that in charge of displaying "there are no results"?
– Dekel
Nov 20 '18 at 13:30
@Dekel That's what I am trying to figure out how to add. I added some HTML with display:none, not sure if that is what you are looking for or not.
– William Cunningham
Nov 20 '18 at 14:00
ok, so you added that element and it's hidden. I don't see any attempt to display it.
– Dekel
Nov 20 '18 at 14:28
Create a working example (snippet) with the relevant code so it will be possible to understand what you are doing and what is the issue.
– Dekel
Nov 20 '18 at 13:13
Create a working example (snippet) with the relevant code so it will be possible to understand what you are doing and what is the issue.
– Dekel
Nov 20 '18 at 13:13
@Dekel I added a Codepen with a working example.
– William Cunningham
Nov 20 '18 at 13:29
@Dekel I added a Codepen with a working example.
– William Cunningham
Nov 20 '18 at 13:29
and where is your code that in charge of displaying "there are no results"?
– Dekel
Nov 20 '18 at 13:30
and where is your code that in charge of displaying "there are no results"?
– Dekel
Nov 20 '18 at 13:30
@Dekel That's what I am trying to figure out how to add. I added some HTML with display:none, not sure if that is what you are looking for or not.
– William Cunningham
Nov 20 '18 at 14:00
@Dekel That's what I am trying to figure out how to add. I added some HTML with display:none, not sure if that is what you are looking for or not.
– William Cunningham
Nov 20 '18 at 14:00
ok, so you added that element and it's hidden. I don't see any attempt to display it.
– Dekel
Nov 20 '18 at 14:28
ok, so you added that element and it's hidden. I don't see any attempt to display it.
– Dekel
Nov 20 '18 at 14:28
|
show 12 more comments
1 Answer
1
active
oldest
votes
1
I managed to figure it out. Here is the code that worked for me:
$("#filter").keyup(function() {
var selectSize = $(this).val();
filter(selectSize);
});
function filter(e) {
var numVisible = 0;
var addCard = $('.ourTeamCards');
if(e) {
var regex = new RegExp('\b\w*' + e + '\w*\b', 'i');
$('.oneStaff').fadeOut(50).filter(function () {
var regExists = regex.test($(this).data('regions'));
if(regExists) {
numVisible +=1;
}
return regExists;
}).fadeIn(50);
if (numVisible == 0) {
$('.noResults').css('display', 'block');
}
else {
$('.noResults').css('display', 'none');
}
}
else {
$('.oneStaff').fadeIn(50);
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-12">
<div class="filterSearch">
<h1 class="">Filter</h1>
<input id="filter" type="text" class="form-control quicksearch" placeholder="Search">
<span class="d-block mt-2 searchIns">Search by country or state</span>
</div>
</div>
</div>
<div class="row ourTeamCards">
<div class="oneStaff col-4 border border-primary" data-target="#exampleModal" data-regions="Alaska, Arizona, Arkansas, California, Colorado, Hawaii, Idaho, Kansas, Louisiana, Missouri, Montana, Nebraska, Nevada, New Mexico, North Dakota, Oklahoma, Oregon, South Dakota, Texas, Utah, Wyoming">
Name
</div>
<div class="oneStaff col-4 border border-primary" data-target="#exampleModal" data-regions="Alaska, Arizona, Arkansas, California, Colorado, Hawaii, Idaho, Kansas, Louisiana, Missouri, Montana, Nebraska, Nevada, New Mexico, North Dakota, Oklahoma, Oregon, South Dakota, Texas, Utah">
Name
</div>
<div class="oneStaff col-4 border border-primary" data-target="#exampleModal" data-regions="Alaska, Arizona, Arkansas, California, Colorado, Hawaii, Idaho, Kansas, Louisiana, Missouri, Montana, Nebraska, Nevada, New Mexico, North Dakota, Oklahoma, Oregon, South Dakota, Texas, Utah">
Name
</div>
</div>
<div class="noResults" style="display:none;">No Results</div>answered Nov 20 '18 at 19:40
William CunninghamWilliam Cunningham
154112
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53393782%2ffiltering-elements-if-no-results-display-this%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
I managed to figure it out. Here is the code that worked for me:
$("#filter").keyup(function() {
var selectSize = $(this).val();
filter(selectSize);
});
function filter(e) {
var numVisible = 0;
var addCard = $('.ourTeamCards');
if(e) {
var regex = new RegExp('\b\w*' + e + '\w*\b', 'i');
$('.oneStaff').fadeOut(50).filter(function () {
var regExists = regex.test($(this).data('regions'));
if(regExists) {
numVisible +=1;
}
return regExists;
}).fadeIn(50);
if (numVisible == 0) {
$('.noResults').css('display', 'block');
}
else {
$('.noResults').css('display', 'none');
}
}
else {
$('.oneStaff').fadeIn(50);
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-12">
<div class="filterSearch">
<h1 class="">Filter</h1>
<input id="filter" type="text" class="form-control quicksearch" placeholder="Search">
<span class="d-block mt-2 searchIns">Search by country or state</span>
</div>
</div>
</div>
<div class="row ourTeamCards">
<div class="oneStaff col-4 border border-primary" data-target="#exampleModal" data-regions="Alaska, Arizona, Arkansas, California, Colorado, Hawaii, Idaho, Kansas, Louisiana, Missouri, Montana, Nebraska, Nevada, New Mexico, North Dakota, Oklahoma, Oregon, South Dakota, Texas, Utah, Wyoming">
Name
</div>
<div class="oneStaff col-4 border border-primary" data-target="#exampleModal" data-regions="Alaska, Arizona, Arkansas, California, Colorado, Hawaii, Idaho, Kansas, Louisiana, Missouri, Montana, Nebraska, Nevada, New Mexico, North Dakota, Oklahoma, Oregon, South Dakota, Texas, Utah">
Name
</div>
<div class="oneStaff col-4 border border-primary" data-target="#exampleModal" data-regions="Alaska, Arizona, Arkansas, California, Colorado, Hawaii, Idaho, Kansas, Louisiana, Missouri, Montana, Nebraska, Nevada, New Mexico, North Dakota, Oklahoma, Oregon, South Dakota, Texas, Utah">
Name
</div>
</div>
<div class="noResults" style="display:none;">No Results</div>answered Nov 20 '18 at 19:40
William CunninghamWilliam Cunningham
154112
add a comment |
1
I managed to figure it out. Here is the code that worked for me:
$("#filter").keyup(function() {
var selectSize = $(this).val();
filter(selectSize);
});
function filter(e) {
var numVisible = 0;
var addCard = $('.ourTeamCards');
if(e) {
var regex = new RegExp('\b\w*' + e + '\w*\b', 'i');
$('.oneStaff').fadeOut(50).filter(function () {
var regExists = regex.test($(this).data('regions'));
if(regExists) {
numVisible +=1;
}
return regExists;
}).fadeIn(50);
if (numVisible == 0) {
$('.noResults').css('display', 'block');
}
else {
$('.noResults').css('display', 'none');
}
}
else {
$('.oneStaff').fadeIn(50);
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-12">
<div class="filterSearch">
<h1 class="">Filter</h1>
<input id="filter" type="text" class="form-control quicksearch" placeholder="Search">
<span class="d-block mt-2 searchIns">Search by country or state</span>
</div>
</div>
</div>
<div class="row ourTeamCards">
<div class="oneStaff col-4 border border-primary" data-target="#exampleModal" data-regions="Alaska, Arizona, Arkansas, California, Colorado, Hawaii, Idaho, Kansas, Louisiana, Missouri, Montana, Nebraska, Nevada, New Mexico, North Dakota, Oklahoma, Oregon, South Dakota, Texas, Utah, Wyoming">
Name
</div>
<div class="oneStaff col-4 border border-primary" data-target="#exampleModal" data-regions="Alaska, Arizona, Arkansas, California, Colorado, Hawaii, Idaho, Kansas, Louisiana, Missouri, Montana, Nebraska, Nevada, New Mexico, North Dakota, Oklahoma, Oregon, South Dakota, Texas, Utah">
Name
</div>
<div class="oneStaff col-4 border border-primary" data-target="#exampleModal" data-regions="Alaska, Arizona, Arkansas, California, Colorado, Hawaii, Idaho, Kansas, Louisiana, Missouri, Montana, Nebraska, Nevada, New Mexico, North Dakota, Oklahoma, Oregon, South Dakota, Texas, Utah">
Name
</div>
</div>
<div class="noResults" style="display:none;">No Results</div>answered Nov 20 '18 at 19:40
William CunninghamWilliam Cunningham
154112
add a comment |
1
1
1
I managed to figure it out. Here is the code that worked for me:
$("#filter").keyup(function() {
var selectSize = $(this).val();
filter(selectSize);
});
function filter(e) {
var numVisible = 0;
var addCard = $('.ourTeamCards');
if(e) {
var regex = new RegExp('\b\w*' + e + '\w*\b', 'i');
$('.oneStaff').fadeOut(50).filter(function () {
var regExists = regex.test($(this).data('regions'));
if(regExists) {
numVisible +=1;
}
return regExists;
}).fadeIn(50);
if (numVisible == 0) {
$('.noResults').css('display', 'block');
}
else {
$('.noResults').css('display', 'none');
}
}
else {
$('.oneStaff').fadeIn(50);
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-12">
<div class="filterSearch">
<h1 class="">Filter</h1>
<input id="filter" type="text" class="form-control quicksearch" placeholder="Search">
<span class="d-block mt-2 searchIns">Search by country or state</span>
</div>
</div>
</div>
<div class="row ourTeamCards">
<div class="oneStaff col-4 border border-primary" data-target="#exampleModal" data-regions="Alaska, Arizona, Arkansas, California, Colorado, Hawaii, Idaho, Kansas, Louisiana, Missouri, Montana, Nebraska, Nevada, New Mexico, North Dakota, Oklahoma, Oregon, South Dakota, Texas, Utah, Wyoming">
Name
</div>
<div class="oneStaff col-4 border border-primary" data-target="#exampleModal" data-regions="Alaska, Arizona, Arkansas, California, Colorado, Hawaii, Idaho, Kansas, Louisiana, Missouri, Montana, Nebraska, Nevada, New Mexico, North Dakota, Oklahoma, Oregon, South Dakota, Texas, Utah">
Name
</div>
<div class="oneStaff col-4 border border-primary" data-target="#exampleModal" data-regions="Alaska, Arizona, Arkansas, California, Colorado, Hawaii, Idaho, Kansas, Louisiana, Missouri, Montana, Nebraska, Nevada, New Mexico, North Dakota, Oklahoma, Oregon, South Dakota, Texas, Utah">
Name
</div>
</div>
<div class="noResults" style="display:none;">No Results</div>answered Nov 20 '18 at 19:40
William CunninghamWilliam Cunningham
154112
I managed to figure it out. Here is the code that worked for me:
$("#filter").keyup(function() {
var selectSize = $(this).val();
filter(selectSize);
});
function filter(e) {
var numVisible = 0;
var addCard = $('.ourTeamCards');
if(e) {
var regex = new RegExp('\b\w*' + e + '\w*\b', 'i');
$('.oneStaff').fadeOut(50).filter(function () {
var regExists = regex.test($(this).data('regions'));
if(regExists) {
numVisible +=1;
}
return regExists;
}).fadeIn(50);
if (numVisible == 0) {
$('.noResults').css('display', 'block');
}
else {
$('.noResults').css('display', 'none');
}
}
else {
$('.oneStaff').fadeIn(50);
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-12">
<div class="filterSearch">
<h1 class="">Filter</h1>
<input id="filter" type="text" class="form-control quicksearch" placeholder="Search">
<span class="d-block mt-2 searchIns">Search by country or state</span>
</div>
</div>
</div>
<div class="row ourTeamCards">
<div class="oneStaff col-4 border border-primary" data-target="#exampleModal" data-regions="Alaska, Arizona, Arkansas, California, Colorado, Hawaii, Idaho, Kansas, Louisiana, Missouri, Montana, Nebraska, Nevada, New Mexico, North Dakota, Oklahoma, Oregon, South Dakota, Texas, Utah, Wyoming">
Name
</div>
<div class="oneStaff col-4 border border-primary" data-target="#exampleModal" data-regions="Alaska, Arizona, Arkansas, California, Colorado, Hawaii, Idaho, Kansas, Louisiana, Missouri, Montana, Nebraska, Nevada, New Mexico, North Dakota, Oklahoma, Oregon, South Dakota, Texas, Utah">
Name
</div>
<div class="oneStaff col-4 border border-primary" data-target="#exampleModal" data-regions="Alaska, Arizona, Arkansas, California, Colorado, Hawaii, Idaho, Kansas, Louisiana, Missouri, Montana, Nebraska, Nevada, New Mexico, North Dakota, Oklahoma, Oregon, South Dakota, Texas, Utah">
Name
</div>
</div>
<div class="noResults" style="display:none;">No Results</div>$("#filter").keyup(function() {
var selectSize = $(this).val();
filter(selectSize);
});
function filter(e) {
var numVisible = 0;
var addCard = $('.ourTeamCards');
if(e) {
var regex = new RegExp('\b\w*' + e + '\w*\b', 'i');
$('.oneStaff').fadeOut(50).filter(function () {
var regExists = regex.test($(this).data('regions'));
if(regExists) {
numVisible +=1;
}
return regExists;
}).fadeIn(50);
if (numVisible == 0) {
$('.noResults').css('display', 'block');
}
else {
$('.noResults').css('display', 'none');
}
}
else {
$('.oneStaff').fadeIn(50);
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-12">
<div class="filterSearch">
<h1 class="">Filter</h1>
<input id="filter" type="text" class="form-control quicksearch" placeholder="Search">
<span class="d-block mt-2 searchIns">Search by country or state</span>
</div>
</div>
</div>
<div class="row ourTeamCards">
<div class="oneStaff col-4 border border-primary" data-target="#exampleModal" data-regions="Alaska, Arizona, Arkansas, California, Colorado, Hawaii, Idaho, Kansas, Louisiana, Missouri, Montana, Nebraska, Nevada, New Mexico, North Dakota, Oklahoma, Oregon, South Dakota, Texas, Utah, Wyoming">
Name
</div>
<div class="oneStaff col-4 border border-primary" data-target="#exampleModal" data-regions="Alaska, Arizona, Arkansas, California, Colorado, Hawaii, Idaho, Kansas, Louisiana, Missouri, Montana, Nebraska, Nevada, New Mexico, North Dakota, Oklahoma, Oregon, South Dakota, Texas, Utah">
Name
</div>
<div class="oneStaff col-4 border border-primary" data-target="#exampleModal" data-regions="Alaska, Arizona, Arkansas, California, Colorado, Hawaii, Idaho, Kansas, Louisiana, Missouri, Montana, Nebraska, Nevada, New Mexico, North Dakota, Oklahoma, Oregon, South Dakota, Texas, Utah">
Name
</div>
</div>
<div class="noResults" style="display:none;">No Results</div>$("#filter").keyup(function() {
var selectSize = $(this).val();
filter(selectSize);
});
function filter(e) {
var numVisible = 0;
var addCard = $('.ourTeamCards');
if(e) {
var regex = new RegExp('\b\w*' + e + '\w*\b', 'i');
$('.oneStaff').fadeOut(50).filter(function () {
var regExists = regex.test($(this).data('regions'));
if(regExists) {
numVisible +=1;
}
return regExists;
}).fadeIn(50);
if (numVisible == 0) {
$('.noResults').css('display', 'block');
}
else {
$('.noResults').css('display', 'none');
}
}
else {
$('.oneStaff').fadeIn(50);
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-12">
<div class="filterSearch">
<h1 class="">Filter</h1>
<input id="filter" type="text" class="form-control quicksearch" placeholder="Search">
<span class="d-block mt-2 searchIns">Search by country or state</span>
</div>
</div>
</div>
<div class="row ourTeamCards">
<div class="oneStaff col-4 border border-primary" data-target="#exampleModal" data-regions="Alaska, Arizona, Arkansas, California, Colorado, Hawaii, Idaho, Kansas, Louisiana, Missouri, Montana, Nebraska, Nevada, New Mexico, North Dakota, Oklahoma, Oregon, South Dakota, Texas, Utah, Wyoming">
Name
</div>
<div class="oneStaff col-4 border border-primary" data-target="#exampleModal" data-regions="Alaska, Arizona, Arkansas, California, Colorado, Hawaii, Idaho, Kansas, Louisiana, Missouri, Montana, Nebraska, Nevada, New Mexico, North Dakota, Oklahoma, Oregon, South Dakota, Texas, Utah">
Name
</div>
<div class="oneStaff col-4 border border-primary" data-target="#exampleModal" data-regions="Alaska, Arizona, Arkansas, California, Colorado, Hawaii, Idaho, Kansas, Louisiana, Missouri, Montana, Nebraska, Nevada, New Mexico, North Dakota, Oklahoma, Oregon, South Dakota, Texas, Utah">
Name
</div>
</div>
<div class="noResults" style="display:none;">No Results</div>answered Nov 20 '18 at 19:40
William CunninghamWilliam Cunningham
154112
answered Nov 20 '18 at 19:40
William CunninghamWilliam Cunningham
154112
answered Nov 20 '18 at 19:40
William CunninghamWilliam Cunningham
154112
answered Nov 20 '18 at 19:40
William CunninghamWilliam Cunningham
154112
154112
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53393782%2ffiltering-elements-if-no-results-display-this%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Create a working example (snippet) with the relevant code so it will be possible to understand what you are doing and what is the issue.
– Dekel
Nov 20 '18 at 13:13
@Dekel I added a Codepen with a working example.
– William Cunningham
Nov 20 '18 at 13:29
and where is your code that in charge of displaying "there are no results"?
– Dekel
Nov 20 '18 at 13:30
@Dekel That's what I am trying to figure out how to add. I added some HTML with display:none, not sure if that is what you are looking for or not.
– William Cunningham
Nov 20 '18 at 14:00
ok, so you added that element and it's hidden. I don't see any attempt to display it.
– Dekel
Nov 20 '18 at 14:28