I am implementing a search function using List.js
List.js https://listjs.com/docs/
I'm having trouble with different features depending on the version
var 1.5.0
getHtmlcannot be used withitem:option#and-can be used in search"//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"
var 2.3.0
getHtmlcan be used withitem:option#and-cannot be used in search"//cdnjs.cloudflare.com/ajax/libs/list.js/2.3.0/list.min.js"
I want to be able to search for # and - while using getHtml.
I would like to seek your advice on this matter.
code https://jsfiddle.net/ckef6r59/
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<!--
When using List.js,
the #searchBox must be inside #users,
but this time Im using the input event
and the #searchBox is out of #users.
-->
<input id="searchBox" placeholder="This case using var 1.5.0, So can search '#' and '-'" style="width:100%;">
<div id="users">
<ul class="list"></ul>
</div>
<script>
// li HTML
function getHtml(values){
return `<li><h3 class="name">${values.name}</h3><p class="born">${values.born}</p></li>`;
}
// create userList object
var userList;
window.addEventListener("load", () => {
var options = {
valueNames: [ 'name', 'born' ],
item: '<li><h3 class="name"></h3><p class="born"></p></li>', // This case using var 1.5.0, So use this
// item: function(values) { return getHtml(values) } // This case using var 1.5.0, So can't use getHtml
};
userList = new List( 'users', options );
// add items
userList.add(items, () => {
console.log('added all items');
});
});
// user items
var items = [{
name: 'Jonny #Strömberg',
born: 1986
},
{
name: 'XStrömberg-Arnklint',
born: 1985
},
{
name: 'Martina Elm',
born: 1986
}
];
// input event
$('#searchBox').on('input',function() {
var q = $(this).val();
var searchCols = [ 'name' ];
userList.search( q, searchCols );
});
</script>