在我的django应用程序中,由于循环,我显示了元素列表(朋友姓名):
<div>
{% for friend in group %}
<p>{{ friend.name }} <p>
{% endfor %}
</div>
我想在列表顶部创建一个搜索框,以便只能找到用户想要的朋友,而无需刷新页面。 我希望搜索栏不需要点击发送请求(例如,在Facebook好友列表顶部的Airtime搜索框)。
我完全不知道如何做到这一点,我正在寻找提示或提示开始。
非常感谢你的帮助。
答案 0 :(得分:1)
正如所建议的那样,使用jQuery非常容易。这是一个直截了当的例子:
<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>
// 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();
}
});
});
我们需要定义不区分大小写:包含选择器,因为jQuery的内置:contains是区分大小写的,可能不是你想要的。
这是一个有效的jsFiddle。
作为网络开发人员,您一定要仔细查看jQuery。你总是需要它。