List.js不适用于表

时间:2014-02-11 14:22:58

标签: javascript html search listjs

我正在尝试使用list.js在表上实现“实时”搜索。我已经在列表上成功测试过(做http://listjs.com/examples/existing-list中的例子)。但是,我无法复制表的这种行为。

我已经完成了这个小代码来复制这个问题:

<!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>

由于某种原因,我无法确定,这是行不通的,在FF中搜索字段上的任何输入都会清除表体,删除它也不会恢复表。你能救我吗?

1 个答案:

答案 0 :(得分:3)

您在变量名称ValueNames中输入的拼写错误应为valueNames。这里代码的一个工作示例:http://jsfiddle.net/pTEJ3/