0

在我的 django 应用程序中，由于循环，我显示了一个元素列表（朋友姓名）：

<div>
{% for friend in group %}
    <p>{{ friend.name }} <p>
{% endfor %}
</div>

我想在我的列表顶部创建一个搜索框，以便能够只找到用户想要的朋友，而无需刷新页面。而且我希望搜索栏不需要单击即可发送请求（例如，Facebook 好友列表顶部的通话时间搜索框）。

我完全不知道如何做到这一点，我正在寻找开始的提示或技巧。

非常感谢您的帮助。

4

1 回答 1

1

正如所建议的，使用 jQuery 非常容易。这是一个简单的示例：

HTML

<input id="searchbox" type="text" placeholder="Search" />
<ul id="friendlist">
    <li>Bob</li>
    <li>John</li>
    <li>Peter</li>
    <li>Paul</li>
    <li>Adam</li>
</ul>

JavaScript

// case insensitive ':contains' selector
jQuery.expr[':'].Contains = function(a, i, m) {
    return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};

$(function() {
    $('#searchbox').on('keyup', function() {
        var w = $(this).val();
        if (w) {
            $('#friendlist li').hide();
            $('#friendlist li:Contains('+w+')').show();
        } else {
            $('#friendlist li').show();                  
        }
    });
});​

我们需要定义不区分大小写的 :Contains 选择器，因为 jQuery 的内置 :contains 是区分大小写的，这可能不是您想要的。

这是一个工作jsFiddle。

作为一名 Web 开发人员，您绝对应该仔细研究jQuery。你总是需要它。

于 2012-11-10T00:23:05.390 回答