検索フォームの作成(Django)

テキスト検索機能の作成

作成手順

• 検索フォームの作成
• ListView内のget_queryset()でテキストを絞り込む
• テンプレートで表示
  • 検索結果
  • 検索結果後のメッセージ

検索フォームの作成

• テンプレート上に、URLにクエリストリングを作成する（?query=検索ワード）formタグを作成
  

index.html

<form method="get">
  <input type="search" value="{{ request.GET.query }}" 
         name="query" type="text" 
         placeholder=" 検索ワードを入力 ">
  <button>検索</button>
</form>

ListView内のget_queryset()でテキストを絞り込む

• 検索結果のメッセージの追加

views.py

from django.views.generic import ListView
from django.db.models import Q # get_queryset()用に追加
from django.contrib import messages #　検索結果のメッセージのため追加

class IndexList(ListView):
    template_name = 'report/index.html'
    paginate_by = 2
    # context_object_name = 'post_list'

    def get_queryset(self): # 検索機能のために追加
        queryset = Post.objects.order_by('-created_date')
        query = self.request.GET.get('query')

        if query:
            queryset = queryset.filter(
            Q(title__icontains=query) | Q(body__icontains=query)
            )
        messages.add_message(self.request, messages.INFO, query) #　検索結果メッセージ
        return queryset

テンプレートで表示（検索結果）

report/index.html

  {% for object in object_list %}
  <div class="content">
    <div class="title">
      <a href="{% url 'post_detail' post.pk %}">{{ object.title }}</a>
    </div>
    <div class="datatime">{{ object.created_date|date:"Y-n-j" }}</div>
  </div>
  {% endfor %}

テンプレートで表示（検索結果メッセージを出力）

• Bootstrapを適用するためsettings.pyにMESSAGE_TAGSを追加
• Bootstrapを適用した検索結果後のメッセージを表示

Bootstrapを適用するためsettings.pyにMESSAGE_TAGSを追加

settings.py

MESSAGE_TAGS = {
    messages.INFO: 'alert alert-info',
    messages.SUCCESS: 'alert alert-success',
    messages.WARNING: 'alert alert-warning',
    messages.ERROR: 'alert alert-danger',
}

Bootstrapを適用した検索結果後のメッセージを表示

report/index.html

    {% if messages %}
      <ul class="messages">
        {% for message in messages %}
          <li {% if message.tags %} class="{{ message.tags }}"{% endif %}>
            "{{ message }}" を含む検索結果:
          </li>
        {% endfor %}
      </ul>
    {% endif %}