List.js is not working when search symbol

332 Views Asked by At

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

  • getHtml cannot be used with item: option
  • # and - can be used in search
  • "//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"

var 2.3.0

  • getHtml can be used with item: 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>
0

There are 0 best solutions below