首页 > 解决方案 > Django 表单:django-autocomplete-light 显示空下拉列表

问题描述

我正在 Django 中构建一个 Web 应用程序,尝试使用django-autocomplete-light (v.3.8.2) 创建一个自动完成字段。我有允许用户创建交易记录的表格。我正在尝试为Trade.owned_game(查找字段)添加一个自动完成字段。我只是得到一个自动完成字段的空下拉字段(截图附在这篇文章的底部)下面是我的代码:

模型.py:

from django.db import models
from django.utils import timezone
from django.contrib.auth.models import User
from django.urls import reverse

class Game(models.Model):
    name = models.TextField()  # Unrestricted text
    platform = models.CharField(max_length=100)  # character field
    created_date = models.DateTimeField(default=timezone.now)
    author = models.ForeignKey(User, on_delete=models.CASCADE)

    def __str__(self):
        return self.name  # return game name when game.objects.all() is called


class Trade(models.Model):
    name = models.TextField() # Unrestricted text
    created_date = models.DateTimeField(default=timezone.now)
    is_trade_proposed = models.BooleanField(default=False)
    user_who_posted = models.ForeignKey(User, on_delete=models.CASCADE)
    owned_game = models.ForeignKey(Game, on_delete=models.CASCADE, related_name='owned_game', db_column='owned_game')

    def __str__(self):
        return self.name # return game name when game.objects.all() is called

网址.py:

from django.urls import path
from django.conf.urls import url
from .views import (
    PostListView,
    TradeListView,
    PostDetailView,
    TradeCreateView,
    GameAutoComplete,
    PostUpdateView,
    PostDeleteView,
    UserPostListView
)
from . import views

urlpatterns = [
    path('', views.home, name='blog-home'),
    path('post/new/', views.trade_new, name='trade-create'),
    url(
        r'^game-autocomplete/$',
        GameAutoComplete.as_view(),
        name='game-autocomplete')
    ,
]

视图.py:

from django.shortcuts import render, get_object_or_404
from django.contrib.auth.mixins import LoginRequiredMixin, UserPassesTestMixin
from django.contrib.auth.models import User
from django.views.generic import (
    ListView,
    DetailView,
    CreateView,
    UpdateView,
    DeleteView
)
from .models import Trade, Game

def trade_new(request):
    form = TradeCreateForm()
    return render(request, 'blog/trade_form.html', {'form': form, 'title': 'asdf'})


class TradeCreateForm(forms.ModelForm):
    game = forms.ModelChoiceField(
        queryset=Game.objects.all(),
        to_field_name = 'name',
        widget=autocomplete.ModelSelect2(url='game-autocomplete')
    )

    class Meta:
        model = Trade
        fields = ['owned_game', 'desired_game']


class TradeCreateView(LoginRequiredMixin, CreateView):
    model = Trade
    fields = ["owned_game"]


class GameAutoComplete(autocomplete.Select2QuerySetView):
    def get_queryset(self):
        if not self.request.user.is_authenticated:
            return Game.objects.none()

        qs = Game.objects.all()

        if self.q:
            qs = qs.filter(name__istartswith=self.q)

        return qs

trade_form.html:

{% extends "blog/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
    <div class="content-section">
        <form method="POST">
            {% csrf_token %}
            <fieldset class="form-group">
                <legend class="border-bottom mb-4">Propose New Trade</legend>
                {{ form|crispy }}



                {{ form.media }}
            </fieldset>
            <div class="form-group">
                <button class="btn btn-outline-info" type="submit">Submit</button>
            </div>
        </form>
    </div>
{% endblock content %}

截屏:

在此处输入图像描述

我已经尝试了这些类似 StackOverflow 问题的解决方案,但它们不起作用:

标签: pythondjangoautocomplete

解决方案


我应该早点检查一下 javascript 控制台!问题是 jQuery 的 <link ...> 脚本之一无效。一旦我解决了这个问题,自动完成字段就起作用了


推荐阅读