如何在无模型CSHTML页面创建带API搜索的位置选择框（代码无效）

你的代码里有几个关键问题导致下拉选项无法渲染，下面是逐一修复方案：

问题1：请求方法用错了 #

查询类接口应该用GET而不是PUT，PUT一般用于更新数据操作，后端可能未配置接收PUT请求的参数解析，直接把请求类型改成GET即可。

问题2：多余的JSON解析 #

Select2的AJAX模块会自动把后端返回的JSON响应解析成对象，手动调用JSON.parse(data)反而会报错（尤其是当响应已经是对象的时候），直接删掉这行代码。

问题3：Hidden字段生成错误 #

@Html.Hidden("FilterLocation", new { id = "locationId" })写法有误，第二个参数是字段默认值，HTML属性需要放在第三个参数里，改成@Html.Hidden("FilterLocation", "", new { id = "locationId" })，否则生成的hidden元素ID可能不符合预期。

问题4：冗余的空Option #

最后那段添加空选中Option的代码完全没必要，还会干扰Select2的初始化逻辑，直接删除即可。

修复后的完整代码 #

HTML部分

<select class="js-data-example-ajax form-control" id="FilterLocation"></select>
@Html.Hidden("FilterLocation", "", new { id = "locationId" })

JavaScript部分

function setLocation() {
    $('.js-data-example-ajax').select2({
        ajax: {
            type: 'GET',
            url: '/api/GoogleCustomSearch/getLocation',
            delay: 250,
            // 统一在这里传递查询参数，比拼在URL里更规范
            data: function (params) {
                return {
                    matchingName: params.term
                };
            },
            processResults: function (data) {
                let results = [];
                // 用可选链避免空值报错，兼容后端返回null的情况
                if (data?.location) {
                    data.location.forEach((e) => {
                        results.push({
                            id: e,
                            text: e
                        });
                    });
                }
                return {
                    results: results
                };
            },
            // 添加错误日志，方便调试接口问题
            error: function(xhr, status, error) {
                console.error('位置查询接口出错:', error);
            }
        },
        placeholder: "搜索位置",
        allowClear: true // 可选：添加清除按钮提升用户体验
    });

    $('.js-data-example-ajax').on('change', function() {
        // 直接用当前元素取值，比通过ID查找更可靠
        $('#locationId').val($(this).val());
        // getZipCodeForDynamic(selVal)
    });
}

// 确保DOM加载完成后再初始化组件
$(document).ready(function() {
    setLocation();
});

调试小技巧 #

1. 按F12打开浏览器开发者工具，切换到Network标签，输入关键词后查看请求是否发送成功，检查后端返回的JSON格式是否符合预期，例如：

   { "location": ["北京", "上海", "广州"] }
   

2. 如果后端直接返回纯数组（而非带location键的对象），需要修改processResults逻辑，直接遍历data而非data.location。

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