jQuery Autocomplete返回Label值异常，需改为返回Value值

你在$.map回调中返回的对象里，错误地将label赋值为数字类型的data.id[key]，而value是文本类型的data.name[key]。jQuery UI Autocomplete默认会把label作为下拉选项的显示内容，这就导致下拉框现在显示的是数字（和你提供的示例图一致），不符合你需要显示文本的需求。

需求1：下拉显示文本，选中后输入框填充文本 #

直接调整label和value的赋值，让两者都指向文本内容：

$(document).ready(function() {
    $('#id_name').autocomplete({            
        source: function(request, response) {
            $.ajax({
                url: "{% url 'proiecte:autocomplete' %}",
                dataType: "json",
                data: {
                    term: request.term
                },
                success: function(data) {
                    response($.map(data.name, function(value, key) {    
                        return {                                
                            label: data.name[key], // 下拉选项显示文本
                            value: data.name[key]  // 选中后输入框填充文本
                        }
                    }));
                }
            });
        },           
    })
});

需求2：下拉显示文本，后台需提交对应ID（输入框仍显示文本） #

如果需要在提交表单时传递ID，但输入框保持显示文本，可以通过select事件配合隐藏字段实现：

$(document).ready(function() {
    $('#id_name').autocomplete({            
        source: function(request, response) {
            $.ajax({
                url: "{% url 'proiecte:autocomplete' %}",
                dataType: "json",
                data: {
                    term: request.term
                },
                success: function(data) {
                    response($.map(data.name, function(value, key) {    
                        return {                                
                            label: data.name[key], // 下拉显示文本
                            value: data.id[key],    // 存储对应ID
                            displayText: data.name[key] // 存储文本用于输入框显示
                        }
                    }));
                }
            });
        },
        select: function(event, ui) {
            event.preventDefault(); // 阻止默认填充ID到输入框的行为
            $('#id_name').val(ui.item.displayText); // 输入框显示文本
            $('#hidden_id').val(ui.item.value); // 把ID存入隐藏字段，用于表单提交
        }
    })
});

修改后，下拉框会显示你需要的文本内容，选中后输入框也会填充对应的文本；如果用第二种方案，既能满足前端显示需求，又能保证后台获取到正确的ID值。

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