如何将PHP数组传递给JS实现HTML输入动态过滤下拉列表

分两种场景处理，优先选小数据量无接口方案，代码量最少，适配现有PHP数组场景，不需要额外写后端接口。

方案1：数据量≤5000条（绝大多数场景适用） #

直接把PHP的玩家数组转成JS可识别的JSON格式嵌在页面里，前端本地做过滤，不需要发请求，响应速度最快。

第一步：把PHP数组传递给JS #

你现有从MongoDB查询得到的PHP数组结构示例：

// 已查询到的玩家数组结构
$players = [
    ['id' => '1', 'name' => '张三'],
    ['id' => '2', 'name' => '李四'],
    // 更多玩家数据
];

直接在页面JS代码块中用json_encode把数组转成JS变量，一步完成后端数据到前端的传递：

<script>
// PHP数组直接转成JS可用的数组格式，和底层用MongoDB/MySQL无关
const playerList = <?php echo json_encode($players); ?>;
</script>

第二步：替换原有select结构 #

把原生<select>替换成文本输入框+隐藏输入框+下拉容器的结构，隐藏输入框用来存选中的玩家ID，表单提交逻辑和之前用select完全兼容：

<!-- 表单内的玩家选择模块 -->
<div class="player-select-wrap">
    <!-- 文本输入框：用于输入关键词、显示选中的玩家姓名 -->
    <input type="text" id="playerInput" placeholder="输入玩家姓名搜索" autocomplete="off">
    <!-- 隐藏域：存储选中的玩家ID，表单提交时传递该值 -->
    <input type="hidden" name="player_id" id="playerIdInput">
    <!-- 下拉选项容器，默认隐藏 -->
    <div id="playerDropdown" class="dropdown-list" style="display: none;"></div>
</div>

加基础样式适配移动端操作：

.player-select-wrap {
    position: relative;
    max-width: 100%;
}
#playerInput {
    width: 100%;
    padding: 12px;
    font-size: 16px; /* 设为16px可避免iOS点击输入框自动缩放页面 */
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 4px;
}
.dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 4px 4px;
    background: #fff;
    z-index: 999;
}
.dropdown-item {
    padding: 12px;
    font-size: 16px;
    cursor: pointer;
}
.dropdown-item:hover, .dropdown-item.active {
    background: #f5f5f5;
}

第三步：编写JS交互逻辑 #

不要用onChange事件，该事件需要输入框失焦才会触发，实时过滤要绑定input事件，支持边输入边触发匹配：

const input = document.getElementById('playerInput');
const idInput = document.getElementById('playerIdInput');
const dropdown = document.getElementById('playerDropdown');

// 输入时实时过滤匹配
input.addEventListener('input', function() {
    const keyword = this.value.trim();
    // 输入为空时清空选中ID，隐藏下拉
    if (!keyword) {
        idInput.value = '';
        dropdown.style.display = 'none';
        return;
    }
    // 过滤姓名包含关键词的玩家，不区分大小写
    const matched = playerList.filter(player => {
        return player.name.toLowerCase().includes(keyword.toLowerCase());
    });
    // 无匹配结果时隐藏下拉
    if (matched.length === 0) {
        dropdown.style.display = 'none';
        return;
    }
    // 渲染匹配选项
    dropdown.innerHTML = matched.map(player => {
        return `<div class="dropdown-item" data-id="${player.id}">${player.name}</div>`
    }).join('');
    dropdown.style.display = 'block';
});

// 点击下拉选项选中对应玩家
dropdown.addEventListener('click', function(e) {
    if (e.target.classList.contains('dropdown-item')) {
        input.value = e.target.innerText;
        idInput.value = e.target.dataset.id;
        dropdown.style.display = 'none';
    }
});

// 点击页面其他区域自动收起下拉
document.addEventListener('click', function(e) {
    if (!e.target.closest('.player-select-wrap')) {
        dropdown.style.display = 'none';
    }
});

方案2：数据量≥10000条（AJAX按需拉取） #

如果玩家总量极大，全量嵌入页面会导致页面体积过大，就用AJAX实时请求后端拿匹配结果。

前端AJAX逻辑和后端用MongoDB还是MySQL完全无关，唯一区别是PHP接口内的查询语法换成MongoDB写法即可，网上现有AJAX教程的前端代码可以直接复用，不需要修改。

后端PHP接口示例（适配MongoDB） #

新建search_player.php文件，接收前端传递的关键词，从MongoDB查询匹配结果返回JSON：

<?php
// 按你自己的逻辑连接MongoDB
require 'vendor/autoload.php';
$client = new MongoDB\Client("mongodb://localhost:27017");
$collection = $client->你的数据库名->players;

$keyword = $_GET['keyword'] ?? '';
if (!$keyword) {
    echo json_encode([]);
    exit;
}
// MongoDB模糊查询，匹配姓名包含关键词的结果，最多返回20条避免下拉过长
$cursor = $collection->find(
    ['name' => new MongoDB\BSON\Regex($keyword, 'i')],
    ['limit' => 20]
);
$result = [];
foreach ($cursor as $doc) {
    $result[] = ['id' => (string)$doc->_id, 'name' => $doc->name];
}
echo json_encode($result);
?>

前端JS调整 #

把方案1里的本地过滤逻辑替换成AJAX请求即可，其他DOM交互逻辑完全不变：

input.addEventListener('input', function() {
    const keyword = this.value.trim();
    if (!keyword) {
        idInput.value = '';
        dropdown.style.display = 'none';
        return;
    }
    // 请求后端拿匹配结果
    fetch(`search_player.php?keyword=${encodeURIComponent(keyword)}`)
        .then(res => res.json())
        .then(matched => {
            if (matched.length === 0) {
                dropdown.style.display = 'none';
                return;
            }
            dropdown.innerHTML = matched.map(player => {
                return `<div class="dropdown-item" data-id="${player.id}">${player.name}</div>`
            }).join('');
            dropdown.style.display = 'block';
        })
});

点击选中、点击外部收起下拉的逻辑和方案1完全一致。

移动端适配注意点 #

• 输入框字体大小设为16px，避免iOS点击输入框时自动缩放页面
• 下拉选项点击区域高度不小于44px，符合移动端可点击区域规范，操作效率远高于原生select滚轮交互
• 不需要引入任何第三方UI库，原生代码兼容性足够覆盖主流iOS、安卓设备

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