0

私のdjangoアプリでは、ループのおかげで要素（友達の名前）のリストを表示します：

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

ページを更新せずに、ユーザーが必要とする友達だけを見つけることができるように、リストの一番上に検索ボックスを作成したいと思います。そして、リクエストを送信するために検索バーをクリックする必要がないようにしたいと思います（例として、Facebookの友達リストの上にあるAirtime検索ボックスがあります）。

私はそれをどのように行うか全く分かりません、そして私は始めるためのヒントやヒントを探しています。

ご助力ありがとうございます。

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();                  
        }
    });
});​

jQueryの組み込みの：containsは大文字と小文字を区別するため、大文字と小文字を区別しない：Containsセレクターを定義する必要があります。

これが動作するjsFiddleです。

Web開発者として、あなたは間違いなくjQueryを詳しく調べる必要があります。あなたはいつもそれを必要としています。

于 2012-11-10T00:23:05.390 に答える