简单的Shuffle.js搜索不适用于Bootstrap 4卡 [英] Simple Shuffle.js search not working with Bootstrap 4 cards

问题描述

所以，最近几天我一直在尝试让 Shuffle.js 与我在 Bootstrap 4 中的卡片配合使用，以产生很好的混洗效果搜索/过滤这些卡片时.

So, I've been trying for the last days to get Shuffle.js to work with my cards in Bootstrap 4, in order to have a nice shuffling effect when searching/filtering those cards.

这里遵循我的HTML和JS的结构.您还可以在此处找到 JSFiddle.net 链接.

Here follows the structure of my HTML and my JS. You can also find here the JSFiddle.net link.

class Card {
  constructor(ref) {
    this.hmi_ref = ref;

    // Bootstap : container type
    this.BS = {}
    this.BS.container = document.createElement('div');
    this.BS.card = document.createElement('div');
    this.BS.image = document.createElement('img');
    this.BS.info = document.createElement('div');
    this.BS.title = document.createElement('h4');
    this.BS.link = document.createElement('a');

    this.BS.card.appendChild(this.BS.link);
    this.BS.link.appendChild(this.BS.image);
    this.BS.card.appendChild(this.BS.title);
    this.BS.container.appendChild(this.BS.card);

    this.BS.container.className = 'col-4 mb-3';
    this.BS.card.className = 'card h-100';
    this.BS.image.className = 'card-img-top';
    this.BS.title.className = 'card-title text-center align-middle';
  }

  add(name, image, page_link) {
    this.BS.image.src = image;
    this.BS.title.textContent = name;
    this.BS.link.href = page_link;
    let newNode = this.BS.container.cloneNode(true);
    this.hmi_ref.appendChild(newNode);
  }
}

let myCard = new Card( document.getElementById('card-space') );
[
    {title: 'Vacanza studio Londra', img: 'https://source.unsplash.com/random/1920x1080', link: 'https://source.unsplash.com/random/1920x1080', category: "Vacanza studio"},
    {title: 'Vacanza studio Roma', img: 'https://source.unsplash.com/random/1920x1080', link: 'https://source.unsplash.com/random/1920x1080', category: "Vacanza studio"},
    {title: 'Vacanza studio Bangkok', img: 'https://source.unsplash.com/random/1920x1080', link: 'https://source.unsplash.com/random/1920x1080', category: "Vacanza studio"},
    {title: 'Vacanza studio Catania', img: 'https://source.unsplash.com/random/1920x1080', link: 'https://source.unsplash.com/random/1920x1080', category: "Vacanze studio"},
    {title: 'Vacanza studio Siracusa', img: 'https://source.unsplash.com/random/1920x1080', link: 'https://source.unsplash.com/random/1920x1080', category: "Vacanza studio"},
    {title: 'Vacanza studio Ragusa', img: 'https://source.unsplash.com/random/1920x1080', link: 'https://source.unsplash.com/random/1920x1080', category: "Vacanza studio"},
    {title: 'Vacanza studio Trapani', img: 'https://source.unsplash.com/random/1920x1080', link: 'https://source.unsplash.com/random/1920x1080', category: "Vacanza studio"},
].map(e => myCard.add(e.title, e.img, e.link, e.category));

class Shuffler {
    constructor(element) {
        this.shuffle = new window.Shuffle(element, {
            itemSelector: '.card',
            sizer: element.querySelector('.sizer'),
        }); 
        document.getElementById('searchBox').addEventListener('keyup', this._handleSearchKeyup.bind(this));
    }

    /**
     * Filter the shuffle instance by items with a title that matches the search input.
     * @param {Event} evt Event object.
     */
    _handleSearchKeyup(evt) {
        const searchText = evt.target.value.toLowerCase();
        this.shuffle.filter(element => {
            console.log('filtering...');
            const titleText = element.querySelector('.card-title').textContent.toLowerCase().trim();
            return titleText.indexOf(searchText) !== -1;
        });
    }
}

window.onload = () => {
    window.demo = new Shuffler(document.querySelector('#card-space'));
}  

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container pt-3">
  <div class="row">
    <div class="col">
      <!-- Main column -->
      <div class="row pt-4">
        <div class="col-9">
          <div id="card-space" class="row h-100">
            <div class="col-1@sm sizer"></div>
          </div>
        </div>
        <div class="col-3">
          <div class="row">
            <form class="form-inline" action="javascript:void(0);">
              <div class="input-group">
                <div class="input-group-prepend">
                  <div class="input-group-text"><i class="fa fa-search" aria-hidden="true"></i></div>
                </div>
                <input id="searchBox" class="form-control" type="search" placeholder="Cerca" aria-label="Cerca">
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://unpkg.com/shufflejs@5"></script>
<!-- jQuery first, then Popper.js and then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

此外，我认为它绝对可以打破的要点如下

In addition, the point in which I think it definitely breaks is the following

this.shuffle.filter(element => {
    const titleText = element.querySelector('.card-title').textContent.toLowerCase().trim();
    return titleText.indexOf(searchText) !== -1;
});

，因为我无法在其中进行调试.

as I cannot be able to debug inside it.

有人对解决此问题有任何想法吗?我一直在寻找Shuffle.js库，就像在看到最终的(希望的！)效果时所获得的感觉一样流畅.

Does anyone have any ideas about the solution to this problem? I've been finding the Shuffle.js library pretty as complicate as smooth is the feeling I get when seeing the final (desired!) effect.

推荐答案

看看这个 demo .我要做的是完全删除整个网格结构，然后使用Bootstrap的 card-deck .之所以这样，是因为该库查找要过滤的项目数组的方式.

Take a look at this demo. What I've done is remove the entire grid structure completely and went for Bootstrap's card-deck. The reason for this, because of the way this library looks for the items array to filter on.

_getItems() {
    return Array.from(this.element.children)
        .filter(el => matches(el, this.options.itemSelector))
        .map(el => new ShuffleItem(el));
}

这基本上意味着它需要直接的孩子并匹配您的itemSelector.在您的HTML结构中，它占用了所有列，并且在您的列上找不到任何 itemSelector 类.

This basically means it takes the direct children and matches your itemSelector. In your HTML structure it takes all the columns, and can't find any itemSelector classes on your columns.

另一个重要的步骤是使用数据组和/或 data-title .现在，我仅将其设置为标题( name )，但我相信您的目标也是添加单独的组.您可以从已经创建的类别选择器中填写(只有一个选项).

Another important step was to use the data-groups and/or data-title. Now I've set it only for the title (name) but I believe your goal is to add separate groups as well. You can fill those in from the category selector you've already created (with only one option tho).

this.BS.card.setAttribute('data-title', name);
this.BS.card.setAttribute('data-groups', name);

此解决方案启用了过滤器，启用了高度，并且只有左侧使 .card-deck 响应，因为card-deck非常棒(我在这里重复).

This solution enables the filter, enables the height and only left is now making .card-deck responsive, as card-deck is great (I'm on repeat here).

在CSS/JS中布置多个div?
使用引导卡每3行循环
如何操作我在引导程序中的卡片组的行之间添加间距

响应式卡座CSS演示

这篇关于简单的Shuffle.js搜索不适用于Bootstrap 4卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！