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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

1459閲覧

Djangoのアプリで、jQueryによるオートコンプリートを実装する方法

ak_suzuki

総合スコア194

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/07/02 03:30

概要

Djangoで、銀行からの借入金を管理するアプリを作っており、オートコンプリート機能について質問です。

新しい借り入れを登録するときに、Bankというテーブルから銀行を選択できるようにしたいです。
Bankには、三菱東京銀行、三井住友銀行、みずほ銀行、りそな銀行、埼玉りそな銀行など、全国の金融機関名が登録済みです。

例えば、「りそな」と入力した時点で、「りそな銀行」「埼玉りそな銀行」が候補として選択可能になるようなイメージです。

現在のコード

python

1(models.py) 2 3class Bank(models.Model): 4 name = models.CharField("金融機関名", max_length=31) 5 code = models.CharField('金融機関コード(4桁)', max_length=4) 6 7 8class Debt(models.Model): 9 bank = models.ForeignKey(Bank, on_delete=models.PROTECT) 10 date_issue = models.DateField("実行日", default=datetime.now) 11 principal = models.PositiveIntegerField("元本(円)", help_text="単位は日本円")

python

1(views.py) 2 3class DebtCreateView(CreateView): 4 model = Debt 5 form_class = DebtForm 6 success_url = reverse_lazy('myapp:debt_list') 7 8 def post(self, request): 9 form = DebtForm(request.POST) 10 if form.is_valid(): 11 debt = form.save(commit=False) 12 debt.company = request.user.profile.company 13 messages.success(request, '新しい借入を登録しました。') 14 debt.save() 15 form.save_m2m() 16 return redirect('myapp:debt_list') 17 else: 18 messages.error(request, 'エラーがあります。') 19 return redirect('myapp:debt_create') 20 21 return render(request, 'myapp/debt_list.html', {'form': form})

python

1(forms.py) 2 3class DebtForm(forms.ModelForm): 4 class Meta: 5 model = Debt 6 fields = ('bank', 'date_issue', 'principal') 7 8 def __init__(self, *args, **kwargs): 9 super().__init__(*args, **kwargs) 10 for field in self.fields.values(): 11 field.widget.attrs['class'] = 'form-control'

html

1(debt_form.html) 2form部分のみ抜粋 3 4<form action="" method="POST"> 5 {{ form.non_field_errors }} 6 <div class="form-row"> 7 <div class="form-group col-md-4"> 8 <label>金融機関名</label> 9 {{ form.bank }}{{ form.bank.errors }} 10 </div> 11 <div class="form-group col-md-3"> 12 <label>融資実行日</label> 13 {{ form.date_issue }} 14 </div> 15 <div class="form-group col-md-2"> 16 <label>元本</label> 17 {{ form.principal }} 18 </div> 19 </div> 20 {% csrf_token %} 21 <button type="submit" class="btn btn-primary" >保存</button> 22</form>

試したこと

jQueryを使うとうまくいくと思い、次のようにやってみました。

html

1<label for="tags">金融機関名</label> 2<input type="text" id="tags" name="bank"> 3 4 5<script> 6$( function() { 7 var availableTags = [ 8 "三菱東京銀行", // 実際には銀行のリストをセットする 9 "三井住友銀行", 10 "みずほ銀行", 11 "りそな銀行", 12 "埼玉りそな銀行", 13 "その他" 14 ]; 15 $( "#tags" ).autocomplete({ 16 source: availableTags 17 }); 18} ); 19</script>

これだと値は引っ張れるものの、{{ form.bank }}の値としてセットされず、データベースへの登録が出来ませんでした。

ご教授の程、よろしくお願いいたします。

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

具体的なコードを提示するのは骨が折れるので、一般的なやり方を提示します。

Ajaxを使って、「特定のURL」たたく
→views.pyで「特定のURL」で行いたい処理を記述する

投稿2019/07/03 07:17

yamato_user

総合スコア2321

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ak_suzuki

2019/07/04 23:36 編集

ありがとうとざいます。 Ajaxを使っていろいろ調べて、かなり進歩しました。 views.pyで、 ```python def get_bankname(request, *args, **kwargs): banks = Bank.objects.all() bankname=[] for item in banks: bankname.append(item.name) data = { 'bank': bankname, } return JsonResponse(data) ``` として、HTMLの方で ```HTML <script> var endpoint= '/api/data/' $.ajax({ method: "GET", url: endpoint, success: function(data){ console.log(data) }, error: function(error_data){ console.log('Error') console.log(error_data) } }) $(function() { $("#banks").autocomplete({ source: "/api/data/", minLength: 1, }); }); </script> (中略) ```HTML <input type="text" id="banks" name="bank"> ``` としました。 F12 を押してコンソールを見ると、Bankはすべて引っ張ってこれているので、あとはHTML上の input タグ内で引っ張ってくるだけという状況まで進みました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問