div 内的搜索框。姜戈答案

【问题标题】：Search box inside a div. Djangodiv 内的搜索框。姜戈
【发布时间】：2012-11-09 16:58:10
【问题描述】：

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

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

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

我完全不知道该怎么做，我正在寻找开始的提示或技巧。

非常感谢您的帮助。

【问题讨论】：

jQuery（或任何类似的 Ajax 库）是您的朋友。 Google 也是您的朋友。
确实，JQuery 会完成这项工作，我有类似的东西，我使用 Twitter 引导程序作为搜索框和 JQuery 来处理行为。

标签： javascript jquery django search

【解决方案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。

作为一名网络开发人员，您绝对应该仔细查看jQuery。你总是需要它。

【讨论】：

谢谢，它运行良好。我只是有一个小问题。我为它开了一个新话题，如果你不想看，你可能可以帮助我：stackoverflow.com/questions/13332867/…再次感谢你，你帮了我很多！