如何在PHP页面中实现基于数组的HTML输入框动态搜索过滤-php教程-PHP中文网

如何在PHP页面中实现基于数组的HTML输入框动态搜索过滤

本文介绍如何将php数组数据无缝传递至前端javascript，结合selectize.js库实现输入时实时过滤下拉选项，无需ajax请求，兼容mongodb等任意后端数据源，特别适合移动端优化。

本文介绍如何将php数组数据无缝传递至前端javascript，结合selectize.js库实现输入时实时过滤下拉选项，无需ajax请求，兼容mongodb等任意后端数据源，特别适合移动端优化。

在PHP生成的页面中，当玩家列表因数据量增长而变得冗长（尤其在iOS Safari的原生

✅ 步骤一：安全导出PHP数组为JSON

在PHP脚本中，将从MongoDB查询得到的玩家数据（如$players = [['id' => '60a1b2...', 'name' => 'Alice'], ...]）通过json_encode()转为前端可读格式，并使用htmlspecialchars()防止XSS：

<?php // 假设 $players 已从 MongoDB 查询获得
$players_json = json_encode($players, JSON_UNESCAPED_UNICODE | JSON_HEX_TAG);
?><script>
  const playersData = <?= $players_json ?>;
</script>

⚠️ 注意：切勿直接echo $players_json或使用json_encode()未加JSON_HEX_TAG等防护选项；确保PHP输出前已设置header('Content-Type: text/html; charset=utf-8');。

✅ 步骤二：引入Selectize.js并初始化

在HTML中引入Selectize（CDN方式）及基础样式，并将原

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/selectize@0.15.2/dist/css/selectize.default.css"><script src="https://cdn.jsdelivr.net/npm/selectize@0.15.2/dist/js/standalone/selectize.min.js"></script><input type="text" id="player-search" placeholder="输入姓名搜索..."><!-- Selectize会自动接管此input，无需<select> -->

随后用JavaScript初始化（支持键入即搜、键盘导航、移动端友好）：

document.addEventListener('DOMContentLoaded', () => {
  const selectize = new Selectize('#player-search', {
    options: playersData,
    valueField: 'id',
    labelField: 'name',
    searchField: ['name'],
    maxOptions: 100, // 防止大数据量渲染卡顿
    create: false,   // 禁止创建新选项（仅过滤已有）
    render: {
      option: function(item, escape) {
        return `<div>${escape(item.name)}</div>`;
      }
    }
  });

  // 可选：监听选中事件获取ID
  selectize.on('item_add', function(value, item) {
    console.log('选中玩家ID:', value); // value 即 item.id
  });
});