将jQuery自动补全改为无搜索的州下拉选择列表并实现选中事件

一、先修复PHP接口的错误 #

你的PHP代码中$country_state_name未定义，会导致返回的value和label为空，修正如下：

public function AllState() {
    $results = [];   
    $Country_states_info = CountryState::GetAllStates(); /* from api */
    foreach ($Country_states_info as $country_state) {
        if (!isset($country_state['name'])) {
            continue;
        }
        // 替换未定义的$country_state_name为$country_state['name']
        $state_name = $country_state['name'];
        $results[] = [
          'value' => $state_name,
          'label' => $state_name,
          'id' => $country_state['id'],
        ];
    }
    return new JsonResponse($results);
}

二、前端实现：页面加载时拉取全量数据并渲染下拉 #

不需要使用autocomplete或select2的搜索功能，直接通过AJAX获取所有州数据，手动生成下拉选项：

<select id="country_state"></select>

// 页面加载完成后执行
$(document).ready(function() {
    // 发起AJAX请求获取所有州数据
    $.ajax({
        type: "POST",
        url: base_path + "countrystatelist.php",
        dataType: "json",
        // 不需要传q参数，直接请求全量数据
        data: {},
        beforeSend: function (jqXHR, settings) {
            Request.List.push(jqXHR);
        },
        success: function(data) {
            // 清空下拉列表避免重复加载
            $('#country_state').empty();
            // 添加默认提示选项（可选）
            $('#country_state').append('<option value="">请选择州/地区</option>');
            // 循环数据生成option
            $.each(data, function(index, item) {
                $('#country_state').append(`<option value="${item.id}">${item.label}</option>`);
            });
        },
        error: function() {
            alert('加载州数据失败');
        }
    });

    // 监听下拉选中事件
    $('#country_state').on('change', function() {
        var selectedId = $(this).val();
        if (selectedId) {
            // 设置自定义属性
            $(this).attr('country_state-id', selectedId);
            // 可选：获取选中的州名称
            var selectedName = $(this).find('option:selected').text();
            console.log('选中：', selectedName, 'ID：', selectedId);
        } else {
            // 未选中时移除自定义属性
            $(this).removeAttr('country_state-id');
        }
    });
});

三、关键说明 #

1. 移除搜索触发逻辑：不再传递q参数给PHP接口，直接拉取全量州数据
2. 手动渲染选项：通过$.each循环接口返回的数据，生成<option>插入到select中，将州ID绑定到option的value属性
3. 选中事件监听：使用原生的change事件替代autocomplete的select事件，更适配普通下拉列表的交互逻辑
4. 容错处理：添加error回调，在请求失败时给出提示；未选中选项时移除自定义属性

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