Django实现输入时显示候选选项的表单输入字段方法

1. 自定义实现（无需第三方库） #

步骤1：定义模型（示例） #

假设你需要联想匹配的是Product模型：

# models.py
from django.db import models

class Product(models.Model):
    name = models.CharField(max_length=255)
    description = models.TextField()

    def __str__(self):
        return self.name

步骤2：创建联想请求处理视图 #

这个视图负责接收输入关键词，返回匹配的数据库结果：

# views.py
from django.http import JsonResponse
from django.db.models import Q
from .models import Product

def autocomplete_product(request):
    query = request.GET.get('q', '')
    if query:
        # 按名称模糊匹配，限制返回10条结果
        products = Product.objects.filter(
            Q(name__icontains=query)
        ).values('id', 'name')[:10]
        return JsonResponse(list(products), safe=False)
    return JsonResponse([], safe=False)

步骤3：配置URL路由 #

将视图映射到URL：

# urls.py
from django.urls import path
from . import views

urlpatterns = [
    # 其他路由...
    path('autocomplete-product/', views.autocomplete_product, name='autocomplete_product'),
]

步骤4：编写表单模板与前端逻辑 #

在模板中实现输入框+联想结果框的渲染与交互：

<!-- templates/your_form.html -->
<form method="post">
    {% csrf_token %}
    <div class="autocomplete-wrap">
        <input type="text" id="product-input" name="product" placeholder="输入产品名称...">
        <div id="autocomplete-list" class="autocomplete-results"></div>
    </div>
    <button type="submit">提交</button>
</form>

<style>
.autocomplete-wrap {
    position: relative;
    width: 320px;
}
#product-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.autocomplete-results {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 4px 4px;
    background: #fff;
    display: none;
    max-height: 220px;
    overflow-y: auto;
}
.autocomplete-results .item {
    padding: 8px 10px;
    cursor: pointer;
}
.autocomplete-results .item:hover {
    background-color: #f5f5f5;
}
</style>

<script>
const input = document.getElementById('product-input');
const resultsBox = document.getElementById('autocomplete-list');

// 监听输入事件发送请求
input.addEventListener('input', function() {
    const query = this.value.trim();
    if (!query) {
        resultsBox.style.display = 'none';
        return;
    }

    fetch(`{% url 'autocomplete_product' %}?q=${encodeURIComponent(query)}`)
        .then(res => res.json())
        .then(data => {
            if (!data.length) {
                resultsBox.style.display = 'none';
                return;
            }

            // 渲染结果列表
            resultsBox.innerHTML = '';
            data.forEach(item => {
                const itemDiv = document.createElement('div');
                itemDiv.className = 'item';
                itemDiv.textContent = item.name;
                // 点击选项填充输入框
                itemDiv.addEventListener('click', () => {
                    input.value = item.name;
                    resultsBox.style.display = 'none';
                });
                resultsBox.appendChild(itemDiv);
            });
            resultsBox.style.display = 'block';
        });
});

// 点击页面其他区域关闭结果框
document.addEventListener('click', (e) => {
    if (!input.contains(e.target) && !resultsBox.contains(e.target)) {
        resultsBox.style.display = 'none';
    }
});
</script>

2. 第三方库简化实现（django-autocomplete-light） #

如果不想手写前端逻辑，可借助成熟库快速实现：

步骤1：安装库 #

pip install django-autocomplete-light

步骤2：配置settings.py #

INSTALLED_APPS = [
    # 放在其他apps前面
    'dal',
    'dal_select2',
    # 你的其他apps...
]

步骤3：创建Autocomplete类 #

# autocomplete.py
from dal import autocomplete
from dal_select2 import mixins
from .models import Product

class ProductAutocomplete(mixins.Select2QuerySetViewMixin, autocomplete.Select2QuerySetView):
    def get_queryset(self):
        # 可添加权限验证逻辑
        qs = Product.objects.all()
        if self.q:
            qs = qs.filter(name__icontains=self.q)
        return qs

步骤4：定义表单 #

# forms.py
from django import forms
from dal import autocomplete
from .models import Product

class ProductForm(forms.ModelForm):
    class Meta:
        model = Product
        fields = ('name',)
        widgets = {
            'name': autocomplete.ModelSelect2(url='product-autocomplete'),
        }

步骤5：配置路由 #

# urls.py
from django.urls import path
from .autocomplete import ProductAutocomplete

urlpatterns = [
    # 其他路由...
    path('product-autocomplete/', ProductAutocomplete.as_view(), name='product-autocomplete'),
]

步骤6：渲染表单 #

在模板中直接渲染表单即可，库会自动处理前端联想逻辑：

<!-- templates/your_form.html -->
<form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">提交</button>
</form>

内容的提问来源于stack exchange，提问作者Dimaapp