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