Список. js поиск <img>объекта?

Question

Попытка поиска объекта изображения с использованием атрибута 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?

Answer 1

Вы можете проверить фильтры на основе пользовательских атрибутов в справочной ссылке codepen

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

Но если вы хотите взломать, следующий код поможет, но я бы предложил go с фильтром пользовательских атрибутов как упоминается в приведенной выше ссылке.

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