List.js is not working for tables

I'm trying to use list.js to implement a "live" searching on a table. I have tested successfully on lists (doing something like the example in http://listjs.com/examples/existing-list). However, I cannot replicate this behavior for tables.

I have done this small code to replicate the issue:

<!DOCTYPE html>
<html><head>
<title>Test try</title>
<meta charset="UTF-8">

<script type="text/javascript" src="list.min.js"></script>

</head><body>

<div id="payload">
<input class="search" placeholder="Search">
<table style="border: 1px solid black">
    <thead>
        <th>a</th>
        <th>b</th>
        <th>c</th>
        <th>d</th>
    </thead>
    <tbody class="list" >
        <tr>
            <td class="a">Lorem </td>
            <td class="b">ipsum </td>
            <td class="c">dolor </td>
            <td class="d">sit </td>
        </tr>
        <tr>
            <td class="a">amet</td>
            <td class="b">consectetur </td>
            <td class="c">adipiscing  </td>
            <td class="d"> elit </td>
        </tr>
    </tbody>
</table>
</div>

<script>
    var options = {ValueNames: ['a','b','c','d']};
    var searchable = new List('payload', options);
</script>

</body>
</html>

For some reason I could not determine, this is not working, in FF any input on the search field clears the table body, and deleting it doesn't restore the table neither. Can you help me?

Solution

You have a typo in the variable name ValueNames that should be valueNames. A working example of your code here: http://jsfiddle.net/pTEJ3/