如何将AJAX返回的地址预测结果渲染为下拉选项，实现谷歌地址自动填充效果

1. 调整HTML结构 #

在原有输入框下方新增下拉列表容器，用于承载返回的地址选项：

<input id="autocomplete" placeholder="输入地址" type="text" class="form-control">
<!-- 地址下拉列表容器 -->
<ul id="address-dropdown" style="display: none; list-style: none; padding: 0; margin: 0; border: 1px solid #e5e7eb; position: absolute; z-index: 9999; background: #ffffff; width: 100%; max-width: 400px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"></ul>

注意：需要给输入框的父级元素设置position: relative，保证下拉列表可以和输入框对齐显示

2. 重写AJAX请求success回调逻辑 #

替换原有success回调，实现结果渲染、点击回填功能：

success: function(data) {
    const $dropdown = $('#address-dropdown');
    // 清空历史选项
    $dropdown.empty();
    // 无匹配结果时隐藏下拉框
    if (!data.predictions || data.predictions.length === 0) {
        $dropdown.hide();
        return;
    }
    // 遍历返回的地址预测结果，生成下拉选项
    $.each(data.predictions, function(index, item) {
        const $option = $(`<li data-place-id="${item.place_id}" style="padding: 10px 15px; cursor: pointer; border-bottom: 1px solid #f3f4f6;">${item.description}</li>`);
        // 悬浮高亮效果
        $option.hover(function() {
            $(this).css('background-color', '#f9fafb');
        }, function() {
            $(this).css('background-color', '#ffffff');
        });
        // 点击选项回填到输入框
        $option.click(function() {
            $('#autocomplete').val($(this).text());
            // 若需要使用选中的place_id，可存储在输入框的data属性中备用
            // $('#autocomplete').data('selected-place-id', $(this).data('place-id'));
            $dropdown.hide();
        });
        $dropdown.append($option);
    });
    // 渲染完成后显示下拉框
    $dropdown.show();
}

3. 补充辅助交互逻辑 #

添加全局点击事件，实现点击页面其他区域自动收起下拉框的效果：

$(document).on('click', function(e) {
    // 点击区域不是输入框也不是下拉列表时，隐藏下拉框
    if (!$(e.target).closest('#autocomplete, #address-dropdown').length) {
        $('#address-dropdown').hide();
    }
});

如果需要输入框内容为空时自动隐藏下拉，可新增输入事件监听：

$('#autocomplete').on('input', function() {
    if ($(this).val().trim() === '') {
        $('#address-dropdown').hide();
    }
});

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