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

请注意，使用slice()不是一种非常有效的技术，因为它仍会返回所有元素，并且只是在创建后截断列表。您可以计算filter()中返回的元素数量，但上面的代码更清晰。除非性能确实成为一个问题，否则我将如何做到这一点。

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

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

更新了上述更改：fiddle

jQuery自动完成样式搜索框，用于从页面中提取链接列表

1 个答案: