List.js 搜索 <img> 对象？答案

【问题标题】：List.js searching <img> object?List.js 搜索 <img> 对象？
【发布时间】：2020-04-25 16:11:36
【问题描述】：

尝试使用 title 属性搜索图像对象。

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 对象，或者我是否必须将其包装在 div 中？

【问题讨论】：

标签： javascript list.js

【解决方案1】：

您可以在 codepen 参考链接中检查基于自定义属性的过滤器

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

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

<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);

【讨论】：