使い方サジェスト結果をテキストボックスに入れる概要DjangoとJavaScriptを使い、入力内容に応じてデータをサジェストするフォームを作成していきます。具体的には、記事に関連記事のような欄があり、記事作成時に関連記事をサジェストしてくれるものを作成していきます。次のような動作のするやつです。管理画面でも同様に表示されます。更新時には既に指定している関連記事が表示されて、それを消したり、新しく足したりできます。記事が100件とか200件とかになってくると、関連記事を探すのにも苦労します。記事に限らずカテゴリやタグも数が多ければそうです。セレクトボックスやチェックボックスでの全件表示だと幅を取りすぎたり、パフォーマンス的に厳しくなる場合もあります。いった場合にはこのウィジェットが役立ちます。覚えておくと、いつかきっと役に立つでしょう。べた書きで実装しても良いのですが、こういったのはDjangoのカスタムウィジェットとして定義しておく便利です。ソースコードをGithubに置いているので、試したい方はクローンしてください。カスタムウィジェットの作成まず、アプリケーション内にwidgets.pyを作ります。自作のウィジェットは、こういったファイルに入れておくのが良いでしょう。中身は次のようにしておきます。'suggest'forms.SelectMultipleを基にしたウィジェットです。テンプレートファイルとしてapp/widgets/suggest.htmlを使い、このウィジェットを利用するのに必須なcss・jsファイルも指定しています。__init__()では、suggestというCSSクラス名を必ず持つようにするための処理を書いています。Django、テンプレートの探索順序で詳しく説明していますが、プロジェクト直下にtemplatesディレクトリを置くような作り(settings.pyでDIRSに何か指定している)ならば、次のような設定をする必要があります。'django.forms.renderers.TemplatesSetting'次に、app/widgets/suggest.htmlを作ります。いったテンプレートは、widgetsのような名前のディレクトリに入れておくとわかりやすいです。%}</div>大雑把に解説すると、次の4つの要素があります。}}-values">)suggest.cssは次のようになります。0.5;}suggest.jsは、次のようになります。選択済みのアイテムをクリックした際、つまり削除処理。サジェスト表示欄内で選択したアイテムの表示用データを作成する。サジェスト表示欄内で選択したアイテムの送信用データを作成する。今回は記事の関連記事ということで、次のようなモデルがある例です。self.titleそして、関連記事のサジェスト候補を作るためのビューも作成しておきます。"""サジェスト候補の記事をJSONで返す。post_list})やっていることは単純で、入力されたキーワードを受け取り、そのキーワードから始まる記事の一覧を返すだけです。こんな感じで、関連記事に限らず様々なデータをサジェスト候補として返却できます。urls.pyで、上のビューを追加するのも忘れないように。name='api_posts_get')フォームを定義して、カスタムウィジェットを利用するように変更しましょう。}今回、カスタムウィジェット自体は、関連記事だけでなく他のケースにも対応できるように作っています。タグのサジェストとかですね。サジェスト候補はモデルや処理の内容によって代わりますので、カスタムウィジェットのattrs引数のdata-urlキーに、サジェスト候補を作成するためのビューURLを渡すようにしています。後は、このフォームをテンプレートに表示するだけです。}}が必要なので、そ忘れないようにしましょう。</form>(正確には、form.as_pだとちょっと問題になることがあります。コンテンツモデル等の話になるのですが、興味があればDjango、フォームの表示方法まとめもご覧ください。Githubのソースコードのように、div要素を使ってフォームフィールドを囲むようにしてください。)admin管理サイトでも利用する場合は、admin.pyを次のようにしましょう。PostAdmin)サジェスト結果をテキストボックスに入れるManyToManyではなくForeignKeyで紐づけたりしていて、サジェストした結果を、テキストボックス内にそのまま入れたいケースがあるかもしれません。Githubにサンプルコードを置いています。PostsDjango、選択した親カテゴリに合わせて子カテゴリを表示Djangoで、選択した大カテゴリによって、小カテゴリの内容を絞りこむような例を解説していきます。JavaScriptで単純に解決する方法と、Ajaxの方法の2つを解説します。AjaxDjangoで、AjaxAjaxを使うことで、ページ遷移することなくページ内容を更新することができます。今回はDjangoフレームワークでAjaxを使う例を紹介していきます。AjaxDjango、フォームの表示方法まとめDjangoで、フォームオブジェクトをテンプレートファイルに渡した際の、様々な表示方法についてです。手作業での取り出し方法を説明していきます。Bootstrap4Bulmaでよく使うJavaScriptコードCSSフレームワークBulmaにはjsファイルは付属しません。幾つかの処理は自分でJavaScriptを書く必要があります。使うものを、今回紹介していきます。JavaScriptDjangoで、ブログ等によくある関連記事欄を作るブログではよく、「関連記事」のようなリンクがあります。今回はDjangoでそれを実装する2つの方法を紹介します。DjangoDjango、テンプレートファイルの探索順序についてDjangoのテンプレートが探される順序を説明していきます。通常のテンプレートのほか、フォームウィジェットのテンプレートにも触れていきます。DjangoDjangoで、プレビュー付き画像アップロード欄を作るDjangoでImageFieldを使うと画像のアップロード欄が作られますが、プレビューは表示されません。ウィジェットを自作し、プレビュー付きの画像アップロード欄を作ります。DjangoカスタムウィジェットDjangoで、表示・非表示切り替え可能なチェックボックスを作るDjangoで、表示・非表示切り替え可能なチェックボックスとなるカスタムウィジェットを作成していきます。DjangoカスタムウィジェットDjango、ファイルアップロード付きテキストエリアを作るDjangoで、テキストウィジェットにファイルをドラッグアンドドロップすると、本文にファイルURLが挿入される処理を実装していきます。ブログ等のアプリケーションでは便利な機能です。DjangoカスタムウィジェットComment記事にコメントするまだコメントはありません。幾つかの方法で、ブログの更新を受け取れます。