0

我从数据库中检索了一个名称列表，并在 jsp 页面中按字母顺序显示它们。

在页面的顶部，我会有一个可点击的字母表，这样通过点击一个字母，用户就可以转到正确的部分。

是否有一个 jquery 插件来实现这一点？或者？

编辑

ABC ....（如果有以 A 等开头的元素，则 A 是一个链接）

一个苹果

B 香蕉书

C ...

编辑 2

我正在尝试使用 jquery listnav 插件，在这里

在jsp文件中，我有：

<script type="text/javascript" src="js/jquery.listnav-2.1.js"></script>
<script type="text/javascript">
    $(function(){
        $('#myList').listnav();
    });
</script>

接着：

<div id="myList-nav"></div>
<ul id="myList">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
</ul>

该插件已正确加载，但萤火虫给出了消息：

TypeError: $(...).listnav is not a function
error source line: $('#myList').listnav();

我不明白我错在哪里。

4

1 回答 1

1

如果我理解正确，您想根据第一个字母划分数据，然后允许用户能够通过该字母过滤一组结果，对吗？

这不是一个 jquery 插件，其他人可能会写出更好的东西，但我在这里为你写了一个 JSFiddle 。

它的基本工作方式是向它传递一个字符串数组，它将读取该数组并将数据拆分为单独的数组，用于从每个字符串的第一个字母中找到的字母表中的每个字母。然后它将为每个人创建一个按钮，单击该按钮仅显示该数据。

这实际上只是大量使用for循环的情况，因此加载可能非常慢，但是一旦加载，它应该会表现良好。

另一种方法是每次只选择与单击的第一个字母匹配的项目时遍历整个数组，这将减少加载时间，但对于一般用途来说会慢得多。

编辑 - 我现在已经创建了一个模块化版本，所以你可以简单地AlphaSplit用你的数组实例化一个新实例，然后在它上面调用 .create() 方法。您可以在此处查看工作版本。

于 2013-03-01T13:48:56.877 回答