質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.06%

検索機能の修正について

受付中

回答 0

投稿

flag 質問者が2日前に「まだ回答を求めています」と言っています。

  • 評価
  • クリップ 0
  • VIEW 78

score 28

問題点

djangoを使用しホームページの検索機能を作成しています。
検索表示を行いましたが、ボタン配置の横にテキストボックスが表示されてしまい、
検索フォームから検索対象の表示が行えません。
ご教授のほどお願いします。

検索ボタン配置画面
イメージ説明

検索表示画面
イメージ説明

 試したこと

下記のサイトを参考にitem_form.html,views.pyファイルのfilterソース部分の確認を行いました。
https://noumenon-th.net/programming/2019/12/18/django-search/

#views.py

from django.contrib.auth.mixins import LoginRequiredMixin
from django.http import HttpResponseRedirect
from django.urls import reverse_lazy
from django.utils import timezone
from django.views.generic import DetailView
from django.views.generic.edit import CreateView, UpdateView, DeleteView
from django_filters.views import FilterView
from django.db.models import Q

from .filters import ItemFilterSet
from .forms import ItemForm
from .models import Item


# 未ログインのユーザーにアクセスを許可する場合は、LoginRequiredMixinを継承から外してください。
#
# LoginRequiredMixin:未ログインのユーザーをログイン画面に誘導するMixin
# 参考:https://docs.djangoproject.com/ja/2.1/topics/auth/default/#the-loginrequired-mixin

class ItemFilterView(LoginRequiredMixin, FilterView):
    """
    ビュー:一覧表示画面
    以下のパッケージを使用
    ・django-filter 一覧画面(ListView)に検索機能を追加
    https://django-filter.readthedocs.io/en/master/
    """
    model = Item

    # django-filter 設定
    filterset_class = ItemFilterSet
    # django-filter ver2.0対応 クエリ未設定時に全件表示する設定
    strict = False

    # 1ページの表示
    paginate_by = 10

    def get(self, request, **kwargs):
        """
        リクエスト受付
        セッション変数の管理:一覧画面と詳細画面間の移動時に検索条件が維持されるようにする。
        """

        # 一覧画面内の遷移(GETクエリがある)ならクエリを保存する
        if request.GET:
            request.session['query'] = request.GET
        # 詳細画面・登録画面からの遷移(GETクエリはない)ならクエリを復元する
        else:
            request.GET = request.GET.copy()
            if 'query' in request.session.keys():
                for key in request.session['query'].keys():
                    request.GET[key] = request.session['query'][key]

        return super().get(request, **kwargs)

    def get_queryset(self):
        q_word = self.request.GET.get('query')

        if q_word:
           object_list = Item.objects.filter(
             Q(name__icontains = q_word) | Q(name2__icontains = q_word) |
             Q(name3__icontains = q_word) | Q(sample_1__icontains = q_word))
        else:
           object_list = Item.objects.all()
        return object_list
#item_filter.html

<form method="post" enctype="multipart/form-data">
    {% extends "./_base.html" %}
    {% load static %}
    {% block content %}
        {% load crispy_forms_tags %}
        <div class="container-fluid bg-secondary text-white">
          <div class ="bg-secondary text-white">  <!-- 画面上部色設定 -->
            <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
                <!-- 検索機能一覧設定 -->
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">検索条件</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="閉じる">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <form id="filter" method="get">
                            <div class="modal-body">
                                {{ filter.form|crispy }}
                            </div>
                        </form>
                        <div class="modal-footer">
                            <a class="btn btn-outline-dark" data-dismiss="modal">戻る</a>
                            <button type="submit" class="btn btn-outline-dark" form="filter">検索</button>
                        </div>
                    </div>
                </div>
            </div>

        <html>
          <head>
            <link rel="stylesheet" type="text/css" href= "{% static 'app.css' %}"> 
          </head>
          <body>
              <div class="container-fluid">
               <div class="col-12 p-3 mb-12">
                    <ul class="list-group">
                      {% if item_list %}
                        {% for item in item_list %}
                            <li class="list-group-item bg-light text-dark"> <!-- サイト表示一覧 背景色変更設定 -->
                                {# item_detail_contents.html を参考に必要な項目を追加してください #}
                              <div class="row">
                                <div class="col-9">

                                  <div class ="row">
                                    <div class="col-2 offset-2">
                                        <p>1_ラーメン店</p>
                                    </div>
                                    <div class="col-4 offset-2">
                                        <p>{{ item.name | default_if_none:"未入力" }}</p>
                                    </div>
                                  </div>

                                  <div class="row">
                                    <div class="col-2 offset-2">
                                        <p>2_メニュー名称</p>
                                    </div>
                                    <div class="col-4 offset-2">
                                        <p>{{ item.name1 | default_if_none:"未入力" }}</p>
                                    </div>
                                  </div>

                                  <div class="row">
                                    <div class="col-2 offset-2">
                                        <p>3_都道府県</p>
                                    </div>
                                    <div class="col-4 offset-2">
                                        <p>{{ item.name2 | default_if_none:"未入力" }}</p>
                                    </div>
                                  </div>

                                  <div class="row">
                                    <div class="col-2 offset-2">
                                        <p>4_市区町村</p>
                                    </div>
                                    <div class="col-4 offset-2">
                                        <p>{{ item.name3 | default_if_none:"未入力" }}</p>
                                    </div>
                                  </div>

                                  <div class="row">
                                    <div class="col-2 offset-2">
                                        <p>5_スープ</p>
                                    </div>
                                    <div class="col-4 offset-2">
                                        <p>{{ item.get_sample_1_display | default_if_none:"未入力" }}</p>
                                    </div>
                                  </div>


                               <div class="row">
                                  <div class="col-12">
                                    <div class="float-right">
                                        <a class="btn btn-dark " href="{% url 'detail' item.pk %}">詳細</a>
                                        <a class="btn btn-dark " href="{% url 'update' item.pk %}">編集</a>
                                        <a class="btn btn-dark " href="{% url 'delete' item.pk %}">削除</a>
                                    </div>
                                  </div>
                               </div>                           
                           </li>
                        {% endfor %}
                      {% else %}      
                           <li class="list-group-item">
                                <p>対象のデータがありません</p>
                           </li>
                      {% endif %}
                    </ul>
                </div>
            </div>
         </body>
        </html>


         <div class ="bg-secondary text-white">
            <div class="row mt-3">
                <div class="col-10 mx-auto">
                    {% include "./_pagination.html" %}
                </div>
            </div>
         </div>

        </div>
    {% endblock %}
    </form>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • m.ts10806

    2021/05/03 08:22

    >検索フォームから検索対象の表示が行えません。

    これはモーダルの起動ができればいいということでしょうか。

    キャンセル

  • fdd

    2021/05/03 09:04

    その認識で大丈夫です。
    本来であればモーダルの検索ボックス上部に検索内容のカテゴリ(1_ラーメン,店,2_メニュー名称,3_都道府県,4_市区町村)が表示されるのですが、表示がされません。また検索自体も行えない状態です。

    キャンセル

  • m.ts10806

    2021/05/03 09:08

    myModalとリンクしてるボタンないですね。

    data-targetにモーダルのIDとリンクするか、JavaScriptでshowさせるかどちらかが必要です。
    https://getbootstrap.com/docs/4.6/components/modal/

    キャンセル

  • fdd

    2021/05/03 10:10

    追記の質問で申し訳ありませんが、data-toggleで data-toggle="modal"
    data-target で data-target="#exampleModal"の2つを入力することで def get_query()関数とリンクすることができる認識で正しいでしょうか?
    また調べる中で、form action で{% url 'リンク関数' %}で検索機能を作成する方法を見つけたのですが、この方法との違いが少し分かりません。

    キャンセル

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.06%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る