jquery - jQuery自动完成式搜索框从页面中提取链接列表

Question

我有一个新闻编辑室页面，里面有一个简短的文章列表。我没有为此使用数据库或 CMS，因此暂时我想实现一个快速搜索功能，以使用搜索框解析标题列表。

我希望能够开始在输入框中输入内容，并且可能使用 .find() 来解析文章列表，然后在 div 中的搜索框下方有一个列表或结果（类似于自动完成）并有文章的链接可以点击到文章本身。我已经在使用 jQuery，所以我宁愿不必也使用 jQueryUI，所以关于如何实现这一点的任何提示？

Answer 1

这就是你所追求的吗？jsfiddle

$(function() {
    $("#searchbox").on("keyup", function() {

        var search = $(this).val().toLowerCase();
        $("#results").empty()

        if(search.trim().length) {
            var hits = $("#articles .articlelink").filter(function() {
                return $(this).text().toLowerCase().indexOf(search) !== -1;
            });
            $("#results").append(hits.clone());
        }        

    });
});​

要限制返回链接的数量，您可以使用.slice()：

var hits = $("#articles .articlelink").filter(function() {
    return $(this).text().toLowerCase().indexOf(search) !== -1;
}).slice(0,3); //return max three items

请注意， usingslice()不是一种非常有效的技术，因为它仍然返回所有元素，并且它只是在创建列表后截断列表。您可以计算返回的元素数量，filter()但上面的代码更简洁。除非性能真的成为问题，否则我会怎么做。

如果您想在搜索不存在的内容时提供默认的“无结果”消息，只需检查hits数组的长度是否为 0：

if (hits.length) {
    $("#results").append(hits.clone());
} else {
    $("#results").append("<li>No results!</li>");
}

更新了上述更改的小提琴：小提琴