List.js 搜索 <img> object？

Question

正在尝试使用标题属性搜索图像 object。

List.js 搜索时初始化，但输入搜索查询时所有图像消失。

<div id="img-list">
<input type="search" class="search">
<div class="list">
    <img class="logo_img show" src="//picsum.photos/seed/a/200/150" title="Hello">
    <img class="logo_img show" src="//picsum.photos/seed/b/200/150" title="World">
</div>

var options = {
valueNames: [{
    attr: 'title',
    attr: 'alt'
}],
searchClass: 'search',
listClass: 'list'
};
var list = new List('img-list', options);

例子 https://codepen.io/crbon/pen/qBExxYj

是否可以搜索 img objects 或者我是否必须将其包装在 div 中？

Answer 1

您可以在代码笔参考中查看基于自定义属性的过滤器 link

https://github.com/javve/list.js/issues/399

但是如果你想破解，下面的代码会有所帮助，但我建议使用上面提到的自定义属性过滤器 link。

<div id="img-list">
<input type="search" class="search"> 
  <ul class="list">
    <li> 
      <h3 class="title">First <img class="ch_logo_img show" src="//picsum.photos/seed/a/200/150" class="title"></h3> 
    </li>
    <li>
      <h3 class="title">Second <img class="ch_logo_img show" src="//picsum.photos/seed/e/200/150" class="title"></h3> 
    </li> 
</ul>
</div>  

li{
  display: inline-block;
  font-size: 0px;
}

var options = {
  valueNames: [ 'title'
  ],
    searchClass: 'search',
    listClass: 'list'
};
var list = new List('img-list', options);

List.js 搜索 <img> object？

List.js searching <img> object?

javascript

list.js