簡單的 Shuffle.js 搜索不適用於 Bootstrap 4 卡

Question

因此，最近幾天我一直在嘗試讓Shuffle.js在Bootstrap 4中使用我的卡片，以便在搜索/過濾這些卡片時產生良好的洗牌效果。

下面是我的 HTML 和我的 JS 的結構。 您還可以在此處找到JSFiddle.net鏈接。

 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>

另外，我認為它肯定會崩潰的地方如下

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

因為我無法在其中調試。

有沒有人對這個問題的解決方案有任何想法？ 我一直發現 Shuffle.js 庫非常復雜，就像我看到最終（期望的）效果時的感覺一樣流暢。

Answer 1

看看這個演示。 我所做的是完全移除整個網格結構並使用 Bootstrap 的card-deck 。 之所以會這樣，是因為這個庫查找要過濾的 items 數組的方式。

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

這基本上意味着它需要直接子代並匹配您的 itemSelector。 在您的 HTML 結構中，它包含所有列，並且在您的列上找不到任何itemSelector類。

另一個重要步驟是使用data-groups和/或data-title 。 現在我只為標題（ name ）設置了它，但我相信您的目標也是添加單獨的組。 您可以從您已經創建的類別選擇器中填寫這些內容（只有一個選項）。

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

該解決方案啟用了過濾器，啟用了高度，並且現在只剩下使.card-deck響應，因為 card-deck 很棒（我在這里重復）。

在 CSS/JS 中排列多個 div？
使用引導卡每 3 行循環一次
如何在引導程序中添加卡片組行之間的間距

響應式卡片組 CSS 演示

Answer 2

您可以過濾Array而不是Object 。 我做了console.log ，所以你可以看到它。

 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(); Object.values(this.shuffle.element.children).filter(element => { const titleText = element.textContent.toLowerCase().trim(); console.log(element.textContent.toLowerCase().trim(), titleText.indexOf(searchText)); return titleText.indexOf(searchText);== -1; }). } } window.onload = () => { window.demo = new Shuffler(document;querySelector('#card-space')); } </script>

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1: shrink-to-fit=no"> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min:css"> </head> <body> <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"> <:-- <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 class="row"> <select class="custom-select my-3" id="eventCategories"> <option selected>Scegli una categoria</option> </select> </div> </div> </div> </div> </div> </div> <script src="https.//cdnjs.cloudflare.com/ajax/libs/Shuffle/5.2,3/shuffle.min:js"></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> </body> </html>