如何在Django中实现带搜索功能的下拉选择栏？

先修正视图代码（必填） #

当前views.py未将表单传入模板上下文，会导致表单无法正确渲染，先做如下修改：

def product(request):
    items = Product.objects.all()
    if request.method == 'POST':
        form = ProductForm(request.POST, request.FILES)
        if form.is_valid():
            form.save()
            # 保存成功后重置表单
            form = ProductForm()
    else:
        form = ProductForm()

    context = {
        'items': items,
        'form': form,  # 必须将form传入上下文
    }
    return render(request, 'products.html', context)

方案一：使用Select2实现（快捷高效） #

Select2是成熟的下拉增强工具，支持搜索过滤、多选等功能，集成成本低：

1. 准备本地资源 #

将Select2的CSS和JS文件下载到项目静态资源目录（如static/css/、static/js/），避免依赖外部链接。

2. 修改表单字段Widget #

在forms.py中给asset_type字段添加标识类，方便后续初始化：

from django import forms
from .models import Product

class ProductForm(forms.ModelForm):
    class Meta:
        model = Product
        fields = ['model_name', 'asset_type']
        widgets = {
            'asset_type': forms.Select(attrs={'class': 'select2'}),
        }

3. 模板中引入资源并初始化 #

修改products.html，添加资源引入和初始化脚本：

<div class="container">
    <div class="row my-1">
        <h4>Enroll a product:</h4>
        <hr>
    </div>
        
    <form method="POST" enctype="multipart/form-data">
        {% csrf_token %}
        {{ form|crispy }}
        <input class="btn btn-success btn-block" type="submit" value="Add Product">
        <button type="button" class="btn btn-danger btn-block">Close</button>
    </form>
</div>

<!-- 引入本地静态资源 -->
<link rel="stylesheet" href="{% static 'css/select2.min.css' %}">
<script src="{% static 'js/jquery.min.js' %}"></script> <!-- Select2依赖jQuery -->
<script src="{% static 'js/select2.min.js' %}"></script>

<!-- 初始化Select2 -->
<script>
$(document).ready(function() {
    $('.select2').select2({
        placeholder: "选择资产类型",
        allowClear: true,
        width: '100%'
    });
});
</script>

方案二：纯前端自定义实现（无外部依赖） #

如果不想引入第三方工具，可通过原生JS实现搜索过滤：

修改模板渲染逻辑 #

手动渲染asset_type字段，添加搜索输入框和过滤脚本：

<div class="container">
    <div class="row my-1">
        <h4>Enroll a product:</h4>
        <hr>
    </div>
        
    <form method="POST" enctype="multipart/form-data">
        {% csrf_token %}
        <!-- 保留原有model_name字段渲染 -->
        <div class="mb-3">
            {{ form.model_name.label_tag }}
            {{ form.model_name }}
        </div>
        
        <!-- 自定义带搜索的下拉框 -->
        <div class="mb-3">
            <label for="asset_type">资产类型</label>
            <input type="text" id="asset-search" class="form-control mb-2" placeholder="搜索资产类型...">
            <select id="asset_type" name="asset_type" class="form-control">
                <option value="">-- 选择类型 --</option>
                {% for value, label in form.asset_type.field.choices %}
                    <option value="{{ value }}">{{ label }}</option>
                {% endfor %}
            </select>
        </div>

        <input class="btn btn-success btn-block" type="submit" value="Add Product">
        <button type="button" class="btn btn-danger btn-block">Close</button>
    </form>
</div>

<!-- 实时过滤脚本 -->
<script>
const searchInput = document.getElementById('asset-search');
const selectOptions = document.querySelectorAll('#asset_type option');

searchInput.addEventListener('input', function() {
    const searchTerm = this.value.toLowerCase();
    selectOptions.forEach(option => {
        const optionText = option.textContent.toLowerCase();
        // 保留默认空选项，仅过滤其他选项
        if (option.value === '') {
            option.style.display = 'block';
        } else {
            option.style.display = optionText.includes(searchTerm) ? 'block' : 'none';
        }
    });
});
</script>

功能说明 #

• 输入内容时实时过滤下拉选项，仅显示包含关键词的结果
• 保留默认空选项，支持清空选择
• 无外部依赖，纯原生JS实现

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