javascript - 同位素 : Create warning if search and filter doesn't give back any result

标签 javascript jquery jquery-isotope

我为 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? )。它对我不起作用。

感谢您的帮助

最佳答案

你可以像这样获取同位素实例

$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>

关于javascript - 同位素 : Create warning if search and filter doesn't give back any result，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29888585/

上一篇：javascript - 使用 onclick 调用 Rails "posts#show"操作

下一篇：javascript - 在 html 文档中使用表单时，如何在同一页面中显示数据？

相关文章：

javascript - 如何将数据从表单传递到我的 Controller ，然后返回到我的客户端 javascript？

JQuery Mobile 加载 Wicket BookmarkablePageLink 时出错

jquery - 如何使用jquery加载函数检索的html表单

javascript - 动态添加项目到Packery。它到底是如何运作的？

javascript - XSS:这如何安全？

javascript - 从 video.js 获取当前时间

javascript - 使用 angularjs 进行表单验证

javascript - rails 。 jQuery 表单提交字段模糊

html - 无法修改一些代码来提供 3 列网格

javascript - 当 child 被触发时，同位素 columnshift 不起作用

©2024 IT工具网  联系我们