Djangoでオートコンプリート機能を実装しようとしていますがうまくいきません。

Question

現状

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

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

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

試したこと

(models.py)

class Bank(models.Model):
    name = models.CharField("金融機関名", max_length=31)
    code = models.CharField('金融機関コード（4桁）', max_length=4)


class Debt(models.Model):
    bank = models.ForeignKey(Bank, on_delete=models.PROTECT)
    date_issue = models.DateField("実行日", default=datetime.now)
    principal = models.PositiveIntegerField("元本（円）", help_text="単位は日本円")

(views.py)

class DebtCreateView(CreateView):
    model = Debt
    form_class = DebtForm
    success_url = reverse_lazy('myapp:debt_list')

    def post(self, request):
        form = DebtForm(request.POST)
        if form.is_valid():
            debt = form.save(commit=False)
            messages.success(request, '新しい借入を登録しました。')
            debt.save()
            form.save_m2m()
            return redirect('myapp:debt_list')
        else:
            messages.error(request, 'エラーがあります。')
            return redirect('myapp:debt_create')

        return render(request, 'myapp/debt_list.html', {'form': form})

(forms.py)

class DebtForm(forms.ModelForm):
    class Meta:
        model = Debt
        fields = ('bank', 'date_issue', 'principal')

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        for field in self.fields.values():
            field.widget.attrs['class'] = 'form-control'

(views.py)
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)

(debt_form.html)
関連部分のみ抜粋

<script>
var endpoint= '/api/data/'
$.ajax({
method: "GET",
url: endpoint,
success: function(data){
},
error: function(error_data){
}
})


$(function() {
$("#banks").autocomplete({
source: "/api/data/",
minLength: 1,
});
});
</script>

<!--実際の入力欄-->
<input type="text" id="banks" name="banks">

コンソール

htmlのscript内にconsole.log(data)とすると、下記のような具合で値は取れています。

bank: (540) ["みずほ", "三菱ＵＦＪ", "三井住友", "りそな", "埼玉りそな", "ジヤパンネツト", "セブン", "ソニー", "楽天", "住信ＳＢＩ", "じぶん", "イオン", "大和ネクスト", "ローソン", "北海道", "青森", ・・・・・・

あとはこれを入力のところ（input）に持ってくるだけだと思うのですが、どうしてもうまくいきません。

お分かりの方、ご教授いただけると幸いです。

よろしくお願いいたします。

Answer 1

Debt モデルの bank フィールドに対応するフォームフィールドを autocomplete が効いたテキスト入力フィールドにしたい、ということです、よね？以下は、この理解が正しい想定での以下コメントです（この認識が間違っていればスルーしてください）。

ご提示のコードを拝見するかぎり、 Debt.bank フィールドは ForeignKey として作られているので、その値としては Bank モデルに対応した DB テーブルの pk の値（＝整数）が格納されます。ですので、その ModelForm の bank フィールドには（ Bank の pk に対応する）整数値を入れて submit する必要があります。そのため、 bank フィールドを autocomplete 機能付きのテキストフィールドにしてもうまく動かないと思います。

……

ForeignKey に対応するフォームフィールドを autocomplete 付きのテキストフィールドにする方法はいろいろあるかと思いますが、特に実装方法にこだわりをお持ちでなければ、

セレクトボックスを autocomplete 付きのテキストフィールドに変換してくれる JavaScript ライブラリ

を使うのがかんたんだと思います。

例えば「 selectbox autocomplete 」で検索すると、次のライブラリが見つかりました。

• https://selectize.github.io/selectize.js/#demo-single-item-select

このタイプのライブラリを使って、「 bank フィールドをそのままセレクトボックスウィジェットで描画しておいて、 JavaScript で autocomplete ウィジェットに変換する」ようにすれば比較的楽に実現できるのではないかと思いますが、いかがでしょう（このライブラリはあくまでも一例としてあげただけで、特段これをおすすめしているわけではありません）。

Comments

[ak_suzuki]

ありがとうございます。私の質問の意図が分かりずラクテ申し訳ありません。ご理解の通りでございます。

教えた頂いたJavaScriptライブラリや、「 selectbox autocomplete 」で検索した結果出てきた内容をいろいろ調べてみました。
まだ完成にはいきませんが、有意義なヒントを得ることが出来、感謝しています。