List.js searching <img> object?

Question

Trying to search image object by using the title attribute.

List.js initialises when searching, but all images disappear upon entering a search query.

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

Example https://codepen.io/crbon/pen/qBExxYj

Is it possible searching img objects or would I have to wrap it in a div for example?

Answer 1

You can able to check the custom attributes based filters in codepen reference link

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

But if you want to hack, following code will help but i would suggest to go with custom attributes filter as mentioned in the above 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);