検索フォーム

CoddyのDjangoジャーニー「フォーム」セクションの一部。レッスン 1/20。

訪問者はまだイベント一覧を検索できません。フォームとは、入力欄と、入力された内容をURLに送信するボタンの組み合わせです。

データの読み取りだけを行うフォームでは、method="get"を使います。ブラウザーは各入力欄の値を、name=valueの形式でURLのクエリ文字列に入れます。ショップのページにあるサイズフィルターの例です。

<form method="get">
    <select name="size">
        <option value="S">Small</option>
        <option value="L">Large</option>
    </select>
    <button type="submit">Show</button>
</form>

「Large」を選ぶと、/products/?size=Lが開きます。入力欄のnameがキーになるため、ビューでは通常のクエリ文字列と同じように、request.GET.get("size", "")を使って値を読み取ります。通常のページ用にデフォルト値も指定しています。

検索するとページが再読み込みされ、入力欄は再び空になります。入力した語句を残すには、それらをテンプレートに渡して、入力欄のvalueに書き込みます。

チャレンジ

簡単

ホームページに検索機能を追加します。

event_list.htmlで、<ul class="events">の上に、method="get"のフォームを追加します。このフォームには、qという名前の入力欄とSearchボタンを含めます。
event_listでは、タイトルにqを含むイベントを大文字と小文字を区別せずに残します。
入力欄のvalueに使うqをテンプレートに渡し、Meetupで検索した場合に入力欄にそのまま残るようにします。

jazzで検索すると、Friday Jazz Nightだけが残り、入力欄にもjazzと表示されます。

自分で試してみよう

from django.shortcuts import get_object_or_404, render

from .models import Event


def event_list(request):
    events = Event.objects.all()
    return render(request, "events/event_list.html", {"events": events})


def event_detail(request, pk):
    event = get_object_or_404(Event, pk=pk)
    return render(request, "events/event_detail.html", {"event": event})