我为TYPO3写了一个扩展名。现在我有一个问题。任何人都可以告诉我，如果我想在搜索字符串或下拉过滤器没有返回任何结果时显示自定义警告文本消息，我该怎么办？类似的东西：
“抱歉 - 我们找不到此搜索过滤器的任何条目！”
目前我的代码看起来像这样：
// Isotope Steinlexikon
$(function() {
var $container = $('#lexikon-masonry'),
$select = $('#lexikon-filter select'),
filters = {};
var qsRegex;
var SelectFilter = '*';
$container.isotope({
itemSelector: '.item',
// Filter mit Suchfeld
filter: function() {
var $this = $(this);
var SerRes = qsRegex ? $(this).text().match( qsRegex ) : true;
var SelRes = $(this).is(SelectFilter);
return SerRes && SelRes;
}
});
// use value of search field to filter
var $quicksearch = $('#quicksearch').keyup( debounce( function() {
qsRegex = new RegExp( $quicksearch.val(), 'gi' );
$container.isotope();
}, 200 ) );
// debounce so filtering doesn't happen every millisecond
function debounce( fn, threshold ) {
var timeout;
return function debounced() {
if ( timeout ) {
clearTimeout( timeout );
}
function delayed() {
fn();
timeout = null;
}
timeout = setTimeout( delayed, threshold || 100 );
}
}
//fancybox
$('.fancybox2').on('click', function(e){
e.preventDefault(); // Default action ausschalten
$.fancybox({
//width: 500,
//height: 400,
autoSize: true,
href: $(this).attr('href'),
type: 'ajax'
});
});
// Filter mit Select Form
$select.change(function() {
var $this = $(this);
// store filter value in object
// i.e. filters.color = 'red'
var group = $this.attr('data-filter-group');
filters[ group ] = $this.find(':selected').attr('data-filter-value');
// console.log( $this.find(':selected') )
// convert object into array
var isoFilters = [];
for ( var prop in filters ) {
isoFilters.push( filters[ prop ] )
}
console.log(filters);
SelectFilter = isoFilters.join('');
$container.isotope();
return false;
});
});#lexikon-masonry .item {
margin: 5px;
padding: 5px;
background: #fff;
border: 1px #ccc solid;
float: left;
-moz-box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.2);
box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.2);
}
#lexikon-masonry .item img {
opacity: 1;
}
#lexikon-masonry .item:hover img {
opacity: 0.5;
}
#lexikon-masonry .image-hover #image-caption {
position: relative;
width: 100%;
text-align: center;
bottom: 0px;
background: #fff;
z-index: 1;
opacity: 1;
text-transform: uppercase;
}
#lexikon-masonry .image-hover:hover #image-caption {
opacity: 0.8;
}
#lexikon-masonry .image-hover #image-caption span {
text-transform: none;
}
#lexikon-masonry .image-hover .img-button-link {
position: absolute;
/*left: 50%;
top: 50%;*/
margin-left: 110px;
margin-top: -125px;
opacity: 0;
}
#lexikon-masonry .image-hover:hover .img-button-link {
opacity: 1;
}
div#lexikon-filter {
position:left;
}
div.lexStyled {
float: left;
margin-right: 20px;
overflow:hidden; /* this hides the select's drop button */
padding:0;
margin:0;
background: white url(../images/select-down.png) no-repeat bottom right;
/* this is the new drop button, in image form */
width:12em;
border-radius:2px;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
border: solid 1px #ccc;
}
div.lexStyled select {
width:115% /* this percentage effectively extends the drop down button out of view */;
background-color:transparent /* this hides the select's background making any styling visible from the div */;
background-image:none;
-webkit-appearance: none /* this is required for Webkit browsers */;
border:none;
box-shadow:none;
padding:0.3em 0.5em; /* padding should be added to the select, not the div */
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://isotope.metafizzy.co/v1/jquery.isotope.min.js"></script>
<div class="row">
<div id="lexikon-suche" class="col span_3">
<input class="form-control" type="text" data-filter-value="" id="quicksearch" placeholder="Durchsuchen" />
</div>
<div id="lexikon-filter" class="col span_9">
<div class="lexStyled">
<select data-filter-group="gestein">
<option data-filter-value="*" class="selected">Alle Gesteine</option>
<option data-filter-value=".lagersteine" class="selected">Lagersteine</option>
<option data-filter-value=".kunststeine" class="selected">Kunststeine</option>
</select>
</div>
<div class="lexStyled">
<select data-filter-group="farbe">
<option data-filter-value="*" class="selected">Alle Farben</option>
<option data-filter-value=".rot" class="selected">Rot</option>
<option data-filter-value=".gelb" class="selected">Gelb</option>
</select>
</div>
</div>
</div>
<br><hr><br>
<div class="row">
<div id="lexikon-masonry" class="col span_12">
<div class="item image-hover lagersteine rot gelb">
<div id="image-caption" class="name">Test1</div>
</div>
<div class="item image-hover kunststeine rot">
<div id="image-caption" class="name">Test2</div>
</div>
<div class="item image-hover lagersteine kunststeine gelb">
<div id="image-caption" class="name">Test3</div>
</div>
</div>
</div>
我没有看到这些答案中给出的例子（jQuery Isotope filter to no items?）。它对我不起作用。
感谢您的帮助
答案 0 :(得分：1)
你可以像这样获得Isotope实例
$container.data('isotope')
这具有属性$filteredAtoms，其中包含过滤的项目。所以要计算，请使用：
var visibleItemsCount = $container.data('isotope').$filteredAtoms.length;
V2
var visibleItemsCount = $container.data('isotope').filteredItems.length;
过滤后，检查可见项目。如果有，请隐藏消息，否则显示。
// Function to check if filters have some results
function checkResults(){
var visibleItemsCount = $container.data('isotope').$filteredAtoms.length;
if( visibleItemsCount > 0 ){
$('.no-results').hide();
}
else{
$('.no-results').show();
}
}
// Isotope Steinlexikon
$(function() {
var $container = $('#lexikon-masonry'),
$select = $('#lexikon-filter select'),
filters = {};
var qsRegex;
var SelectFilter = '*';
$container.isotope({
itemSelector: '.item',
// Filter mit Suchfeld
filter: function() {
var $this = $(this);
var SerRes = qsRegex ? $(this).text().match( qsRegex ) : true;
var SelRes = SelectFilter == '' || $(this).is(SelectFilter);
return SerRes && SelRes;
}
});
// use value of search field to filter
var $quicksearch = $('#quicksearch').keyup( debounce( function() {
qsRegex = new RegExp( $quicksearch.val(), 'gi' );
$container.isotope();
checkResults();
}, 200 ) );
// debounce so filtering doesn't happen every millisecond
function debounce( fn, threshold ) {
var timeout;
return function debounced() {
if ( timeout ) {
clearTimeout( timeout );
}
function delayed() {
fn();
timeout = null;
}
timeout = setTimeout( delayed, threshold || 100 );
}
}
// Function to check if filters have some results
function checkResults(){
var visibleItemsCount = $container.data('isotope').$filteredAtoms.length;
console.log(filters);
if( visibleItemsCount > 0 ){
$('.no-results').hide();
}
else{
$('.no-results').show();
}
}
//fancybox
$('.fancybox2').on('click', function(e){
e.preventDefault(); // Default action ausschalten
$.fancybox({
//width: 500,
//height: 400,
autoSize: true,
href: $(this).attr('href'),
type: 'ajax'
});
});
// Filter mit Select Form
$select.change(function() {
var $this = $(this);
// store filter value in object
// i.e. filters.color = 'red'
var group = $this.attr('data-filter-group');
filters[ group ] = $this.find(':selected').attr('data-filter-value');
// console.log( $this.find(':selected') )
// convert object into array
var isoFilters = [];
for ( var prop in filters ) {
if( filters[ prop ] != '*' ){
isoFilters.push( filters[ prop ] )
}
}
SelectFilter = isoFilters.join('');
$container.isotope();
checkResults();
return false;
});
});#lexikon-masonry .item {
margin: 5px;
padding: 5px;
background: #fff;
border: 1px #ccc solid;
float: left;
-moz-box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.2);
box-shadow: 0px 6px 6px 0px rgba(0,0,0,0.2);
}
#lexikon-masonry .item img {
opacity: 1;
}
#lexikon-masonry .item:hover img {
opacity: 0.5;
}
#lexikon-masonry .image-hover #image-caption {
position: relative;
width: 100%;
text-align: center;
bottom: 0px;
background: #fff;
z-index: 1;
opacity: 1;
text-transform: uppercase;
}
#lexikon-masonry .image-hover:hover #image-caption {
opacity: 0.8;
}
#lexikon-masonry .image-hover #image-caption span {
text-transform: none;
}
#lexikon-masonry .image-hover .img-button-link {
position: absolute;
/*left: 50%;
top: 50%;*/
margin-left: 110px;
margin-top: -125px;
opacity: 0;
}
#lexikon-masonry .image-hover:hover .img-button-link {
opacity: 1;
}
.no-results{
display:none;
}
div#lexikon-filter {
position:left;
}
div.lexStyled {
float: left;
margin-right: 20px;
overflow:hidden; /* this hides the select's drop button */
padding:0;
margin:0;
background: white url(../images/select-down.png) no-repeat bottom right;
/* this is the new drop button, in image form */
width:12em;
border-radius:2px;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
border: solid 1px #ccc;
}
div.lexStyled select {
width:115% /* this percentage effectively extends the drop down button out of view */;
background-color:transparent /* this hides the select's background making any styling visible from the div */;
background-image:none;
-webkit-appearance: none /* this is required for Webkit browsers */;
border:none;
box-shadow:none;
padding:0.3em 0.5em; /* padding should be added to the select, not the div */
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://isotope.metafizzy.co/v1/jquery.isotope.min.js"></script>
<div class="row">
<div id="lexikon-suche" class="col span_3">
<input class="form-control" type="text" data-filter-value="" id="quicksearch" placeholder="Durchsuchen" />
</div>
<div id="lexikon-filter" class="col span_9">
<div class="lexStyled">
<select data-filter-group="gestein">
<option data-filter-value="*" class="selected">Alle Gesteine</option>
<option data-filter-value=".lagersteine" class="selected">Lagersteine</option>
<option data-filter-value=".kunststeine" class="selected">Kunststeine</option>
</select>
</div>
<div class="lexStyled">
<select data-filter-group="farbe">
<option data-filter-value="*" class="selected">Alle Farben</option>
<option data-filter-value=".rot" class="selected">Rot</option>
<option data-filter-value=".gelb" class="selected">Gelb</option>
</select>
</div>
</div>
</div>
<br><hr><br>
<div class="row">
<div id="lexikon-masonry" class="col span_12">
<div class="item image-hover lagersteine rot gelb">
<div id="image-caption" class="name">Test1</div>
</div>
<div class="item image-hover kunststeine rot">
<div id="image-caption" class="name">Test2</div>
</div>
<div class="item image-hover lagersteine kunststeine gelb">
<div id="image-caption" class="name">Test3</div>
</div>
</div>
<div class="no-results">Sorry - we can't find any entries with this search filters!</div>
</div>