Django+jQuery自动补全：如何同时显示城市名与邮政编码

完全可行，只需要调整后端返回的数据格式，并优化前端自动补全的配置即可，具体步骤如下：

1. 调整后端自动补全视图（recherche） #

jQuery UI Autocomplete支持接收包含label和value的JSON数组，其中label用于显示下拉选项内容，value用于存储实际提交的查询值。修改recherche视图，返回包含城市名+邮政编码的组合label：

函数视图示例： #

from django.http import JsonResponse
from django.db.models import Q
from .models import VilleCountry

def recherche(request):
    # jQuery Autocomplete默认用`term`参数传递输入内容
    query = request.GET.get('term', '')
    # 过滤匹配城市名或邮编的结果，限制返回数量避免性能问题
    villes = VilleCountry.objects.filter(
        Q(name__startswith=query) | Q(zip_code__startswith=query)
    )[:10]
    # 构造返回的JSON数据
    results = [
        {
            'label': f"{ville.name} - {ville.zip_code}",
            'value': ville.name  # 这里可根据需求设置为城市名、邮编或其他值
        }
        for ville in villes
    ]
    return JsonResponse(results, safe=False)

类视图示例： #

from django.views.generic import View
from django.http import JsonResponse
from django.db.models import Q
from .models import VilleCountry

class RechercheAutocomplete(View):
    def get(self, request, *args, **kwargs):
        query = request.GET.get('term', '')
        villes = VilleCountry.objects.filter(
            Q(name__startswith=query) | Q(zip_code__startswith=query)
        )[:10]
        results = [
            {'label': f"{v.name} - {v.zip_code}", 'value': v.name}
            for v in villes
        ]
        return JsonResponse(results, safe=False)

确保URL配置中recherche路由指向上述视图。

2. 修改前端自动补全配置 #

调整jQuery Autocomplete的select和focus事件，确保下拉选项显示组合内容，同时输入框能正确展示选中的内容，且表单提交时能传递有效的查询值：

<form method="GET" action="{% url 'ville_select' %}"> 
    {% csrf_token %}
    <label for="villeselect">Ville</label>
    <!-- 用于显示组合内容的输入框 -->
    <input type="text" name="display_name" id="villeselect">
    <!-- 隐藏输入框存储实际查询值，避免从显示内容中拆分字符串 -->
    <input type="hidden" name="query_value" id="query_value">
    <button type="submit">Go</button>
</form>  

<script>
$(function () {
    $("#villeselect").autocomplete({
        source: "{% url 'recherche' %}",
        minLength: 3,
        // 选中选项时的处理逻辑
        select: function(event, ui) {
            event.preventDefault(); // 阻止默认用value填充输入框的行为
            $("#villeselect").val(ui.item.label); // 显示城市+邮编的组合内容
            $("#query_value").val(ui.item.value); // 存储实际查询值到隐藏输入框
        },
        // 聚焦到选项时的处理逻辑
        focus: function(event, ui) {
            event.preventDefault();
            $("#villeselect").val(ui.item.label); // 聚焦时也显示组合内容
        }
    });
});
</script>

3. 更新搜索结果视图（VilleSelect） #

修改VilleSelect的get_context_data方法，从隐藏输入框获取查询值：

class VilleSelect(ListView):
    model = VilleCountry    
    template_name = 'ville/ville_select.html'    
        
    def get_context_data(self,*arg,**kwargs):
        context = super(VilleSelect,self).get_context_data(*arg,**kwargs)
        # 优先从隐藏输入框获取查询值，兼容直接输入的情况
        query = self.request.GET.get('query_value', self.request.GET.get('display_name', ''))
        context['posts'] = VilleCountry.objects.filter(
            Q(name__startswith=query) | Q(zip_code__startswith=query)
        )   
        return context

这样就能实现下拉选项同时展示城市名与邮政编码，且表单提交后能正确过滤对应的结果。

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