Django结合jQuery UI实现表单自动填充，从Model中读取城市及对应邮编

解决方案 #

你需要调整后端接口的返回结构，同时修改前端自动完成逻辑，两步即可实现城市和邮编的关联填充：

1. 修改 views.py 接口返回内容

原来的接口仅返回城市名称列表，现在要同时返回城市名和对应的邮编，适配jQuery UI Autocomplete的标准数据结构即可：

def autofill(request):
    if 'term' in request.GET:
        qs = City.objects.filter(cities__icontains=request.GET.get('term'))
        # 构造包含城市名、邮编的字典列表
        city_list = []
        for city in qs:
            city_list.append({
                'label': city.cities, # 下拉列表显示的文本
                'value': city.cities, # 选中后填入城市输入框的内容
                'zipcode': city.zipcode # 自定义字段：对应邮编
            })
        return JsonResponse(city_list, safe=False)
    return render(request, 'part/test.html',)

2. 修改前端jQuery代码

删除硬编码的邮编映射对象，直接从接口返回的选中项中提取邮编填充即可：

<script>
    $(document).ready(function() {
        $('#autoSuggest').autocomplete({
            source: "{% url 'autofill' %}",
            select: function(event, ui) {
                // 直接取返回项里的zipcode字段填入邮编输入框
                $('#zipCode').val(ui.item.zipcode);
            }
        })
    });
</script>

补充说明 #

如果存在重名城市，你可以在返回结构中额外增加城市id字段，选中后把id也存入隐藏域，避免后续业务逻辑出错。

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