Javascript Simple Shuffle.js搜索不适用于Bootstrap 4卡

因此，在过去的几天里，我一直在尝试让

Shuffle.js

在

bootstrap4

中使用我的卡，以便在搜索/过滤这些卡时具有良好的洗牌效果

下面是我的HTML和JS的结构。你也可以在这里找到链接

类卡{
建造师（参考）{
this.hmi_ref=ref；
//Bootstap：容器类型
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）；
本.BS.卡片.appendChild（本.BS.标题）；
this.BS.container.appendChild（this.BS.card）；
this.BS.container.className='col-4mb-3'；
this.BS.card.className='card h-100'；
this.BS.image.className='card img top'；
this.BS.title.className='卡片标题文本中心对齐中间'；
}
添加（名称、图像、页面链接）{
this.BS.image.src=图像；
this.BS.title.textContent=名称；
this.BS.link.href=页面链接；
让newNode=this.BS.container.cloneNode（true）；
此.hmi_参考附录子节点（新节点）；
}
}
让myCard=新卡（document.getElementById（'Card-space'）；
[
{标题：'Vacanza studio Londra'，img:'https://source.unsplash.com/random/1920x1080'链接：'https://source.unsplash.com/random/1920x1080，类别：“Vacanza工作室”}，
{标题：“罗马瓦坎扎工作室”，img:'https://source.unsplash.com/random/1920x1080'链接：'https://source.unsplash.com/random/1920x1080，类别：“Vacanza工作室”}，
{标题：“曼谷瓦坎扎工作室”，img:'https://source.unsplash.com/random/1920x1080'链接：'https://source.unsplash.com/random/1920x1080，类别：“Vacanza工作室”}，
{标题：“卡塔尼亚瓦坎扎工作室”，img:'https://source.unsplash.com/random/1920x1080'链接：'https://source.unsplash.com/random/1920x1080，类别：“Vacanze工作室”}，
{标题：'Vacanza studio Siracusa'，img:'https://source.unsplash.com/random/1920x1080'链接：'https://source.unsplash.com/random/1920x1080，类别：“Vacanza工作室”}，
{标题：'Vacanza studio Ragusa'，img:'https://source.unsplash.com/random/1920x1080'链接：'https://source.unsplash.com/random/1920x1080，类别：“Vacanza工作室”}，
{标题：'Vacanza studio Trapani'，img:'https://source.unsplash.com/random/1920x1080'链接：'https://source.unsplash.com/random/1920x1080，类别：“Vacanza工作室”}，
].map（e=>myCard.add（e.title，e.img，e.link，e.category））；
类洗牌器{
构造函数（元素）{
this.shuffle=新窗口.shuffle（元素{
itemSelector:“.card”，
sizer:element.querySelector（'.sizer'），
}); 
document.getElementById（'searchBox'）.addEventListener（'keyup'，this.\u handleSearchKeyup.bind（this））；
}
/**
*按标题与搜索输入匹配的项目筛选洗牌实例。
*@param{Event}evt事件对象。
*/
_handleSearchKeyup（evt）{
const searchText=evt.target.value.toLowerCase（）；
this.shuffle.filter（元素=>{
log（'filtering…'）；
const titleText=element.querySelector（'.card title'）.textContent.toLowerCase（）.trim（）；
返回titleText.indexOf（searchText）！=-1；
});
}
}
window.onload=（）=>{
window.demo=new Shuffler（document.querySelector（“#卡片空间”）；
}

---

您可以筛选

数组

而不是

对象

。我做了

console.log

，这样您就可以看到它了

类卡{
建造师（参考）{
this.hmi_ref=ref；
//Bootstap：容器类型
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）；
本.BS.卡片.appendChild（本.BS.标题）；
this.BS.container.appendChild（this.BS.card）；
this.BS.container.className='col-4mb-3'；
this.BS.card.className='card h-100'；
this.BS.image.className='card img top'；
this.BS.title.className='卡片标题文本中心对齐中间'；
}
添加（名称、图像、页面链接）{
this.BS.image.src=图像；
this.BS.title.textContent=名称；
this.BS.link.href=页面链接；
让newNode=this.BS.container.cloneNode（true）；
此.hmi_参考附录子节点（新节点）；
}
}
让myCard=新卡（document.getElementById（'Card-space'）；
[
{标题：'Vacanza studio Londra'，img:'https://source.unsplash.com/random/1920x1080'链接：'https://source.unsplash.com/random/1920x1080，类别：“Vacanza工作室”}，
{标题：“罗马瓦坎扎工作室”，img:'https://source.unsplash.com/random/1920x1080'链接：'https://source.unsplash.com/random/1920x1080，类别：“Vacanza工作室”}，
{标题：“曼谷瓦坎扎工作室”，img:'https://source.unsplash.com/random/1920x1080'链接：'https://source.unsplash.com/random/1920x1080，类别：“Vacanza工作室”}，
{标题：“卡塔尼亚瓦坎扎工作室”，img:'https://source.unsplash.com/random/1920x1080'链接：'https://source.unsplash.com/random/1920x1080，类别：“Vacanze工作室”}，
{标题：'Vacanza studio Siracusa'，img:'https://source.unsplash.com/random/1920x1080，链接：'https
_getItems() {
    return Array.from(this.element.children)
        .filter(el => matches(el, this.options.itemSelector))
        .map(el => new ShuffleItem(el));
}

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