核心PHP实现数据库值传入HTML输入框自动补全方案求助

我来帮你搞定这个自动补全的问题！看了你提供的代码，你已经成功从数据库拿到数据了，问题主要出在数据格式处理和前端交互逻辑缺失上——咱们一步步来修正：

1. 优化后端PHP代码（调整数据输出格式） #

你当前的PHP代码返回的是包含name键的对象数组，但前端自动补全更适合直接用纯字符串数组。另外，最好把这段代码单独存成一个接口文件，不要和HTML混写，方便前端请求。

修改后的代码（存为get_pg_names.php）：

<?php
include('db_connection.php');
$list = array();
$sql = "SELECT `name` FROM `tbl_master_property`";
$result = $conn->query($sql);

// 直接提取name字段值存入数组，而非整个关联数组
while ($row = mysqli_fetch_assoc($result)) {
    $list[] = $row['name'];
}

// 设置正确的JSON响应头，避免前端解析错误
header('Content-Type: application/json');
echo json_encode($list);
?>

2. 完善前端HTML与自动补全逻辑 #

方案一：用原生JS实现（无需依赖第三方库） #

这是最轻量化的方案，不需要引入额外资源，代码如下：

<div class="search">
    <label>PG Name:</label>
    <input type="text" id="pgSearch" placeholder="输入PG名称自动补全">
    <!-- 用来展示补全选项的容器 -->
    <div id="autocompleteDropdown" style="border:1px solid #ddd; display:none; max-height:220px; overflow-y:auto; margin-top:4px; border-radius:4px;"></div>
</div>

<script>
// 存储从后端获取的PG名称列表
let pgNameList = [];

// 页面加载时请求后端数据
window.addEventListener('load', function() {
    fetch('get_pg_names.php')
        .then(response => response.json())
        .then(data => {
            pgNameList = data;
        })
        .catch(err => console.error('加载数据失败:', err));
});

const searchInput = document.getElementById('pgSearch');
const dropdown = document.getElementById('autocompleteDropdown');

// 监听输入框的输入事件
searchInput.addEventListener('input', function() {
    const inputValue = this.value.toLowerCase().trim();
    // 过滤匹配的名称
    const matches = pgNameList.filter(name => name.toLowerCase().includes(inputValue));
    
    // 清空之前的选项
    dropdown.innerHTML = '';
    
    if (matches.length > 0) {
        dropdown.style.display = 'block';
        // 生成每个匹配选项
        matches.forEach(name => {
            const optionItem = document.createElement('div');
            optionItem.style.padding = '8px 12px';
            optionItem.style.cursor = 'pointer';
            optionItem.style.background = '#fff';
            optionItem.textContent = name;
            
            // 点击选项时填充到输入框并关闭下拉
            optionItem.addEventListener('click', function() {
                searchInput.value = name;
                dropdown.style.display = 'none';
            });
            
            // 鼠标悬停高亮
            optionItem.addEventListener('mouseover', function() {
                this.style.background = '#f5f5f5';
            });
            optionItem.addEventListener('mouseout', function() {
                this.style.background = '#fff';
            });
            
            dropdown.appendChild(optionItem);
        });
    } else {
        dropdown.style.display = 'none';
    }
});

// 点击页面其他区域关闭下拉列表
document.addEventListener('click', function(e) {
    if (!searchInput.contains(e.target) && !dropdown.contains(e.target)) {
        dropdown.style.display = 'none';
    }
});
</script>

方案二：用jQuery UI实现（更美观的交互） #

如果你项目中已经在用jQuery，可以用jQuery UI的Autocomplete组件，步骤如下：

1. 下载jQuery和jQuery UI的资源文件（从官方下载后放到项目的js和css目录）
2. 编写HTML和JS代码：

<div class="search">
    <label>PG Name:</label>
    <input type="text" id="pgSearch" placeholder="输入PG名称自动补全">
</div>

<!-- 引入本地的jQuery和jQuery UI资源 -->
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<link rel="stylesheet" href="css/jquery-ui.css">

<script>
$(document).ready(function() {
    // 从后端获取数据
    $.ajax({
        url: 'get_pg_names.php',
        type: 'GET',
        dataType: 'json',
        success: function(data) {
            // 绑定自动补全功能
            $('#pgSearch').autocomplete({
                source: data,
                minLength: 1, // 输入1个字符就触发补全
                select: function(event, ui) {
                    // 选中选项后的回调（可选）
                    console.log('选中了PG:', ui.item.value);
                }
            });
        },
        error: function() {
            alert('获取PG名称列表失败，请检查后端连接');
        }
    });
});
</script>

3. 常见问题排查 #

• 确认db_connection.php能正常连接数据库，且当前数据库用户有权限读取tbl_master_property表
• 打开浏览器控制台（按F12），查看get_pg_names.php的请求是否成功，有没有报错信息
• 检查get_pg_names.php的文件路径是否正确，前端请求时能访问到该文件
• 如果用jQuery UI方案，确认本地资源文件的路径没有写错

这样调整后，输入框的自动补全功能应该就能正常工作啦！

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