如何在WordPress（Elementor）中跨页面添加Ninja Tables数据库搜索框

方法1：利用Ninja Tables原生功能+Elementor表单/短代码（零额外插件） #

• 先在Ninja Tables的药品表格设置中，开启前端搜索功能（在「前端设置」面板里找到搜索选项，勾选启用）。
• 场景1：搜索后跳转到表格页面展示结果
  1. 在Elementor编辑目标页面（页面B）时，添加「表单」组件（Elementor原生表单即可），只保留一个「搜索关键词」输入框和提交按钮。
  2. 将表单的提交地址设为药品表格所在页面（页面A）的URL，提交方式选择「GET」。
  3. 回到Ninja Tables的表格设置，找到「URL参数过滤」选项，设置过滤参数名和表单输入框的name属性一致（比如输入框name设为drug-search，表格就配置接收drug-search参数作为搜索关键词）。用户提交搜索后，会直接跳转到页面A并显示过滤后的药品列表。
• 场景2：在搜索页面直接展示结果
  1. 在页面B用Elementor的「短代码」组件嵌入药品表格的短代码，短代码格式为[ninja_tables id="你的表格ID" search=""]（替换ID为实际表格ID）。
  2. 添加搜索表单，提交方式设为「GET」，提交到当前页面。表格会自动读取URL中的搜索参数，实时过滤并展示结果。

方法2：自定义JS实现实时搜索（进阶定制） #

如果需要实时输入实时过滤的体验，可以用Elementor的HTML组件写简单JS：

1. 在页面B嵌入药品表格短代码，同时添加一个自定义输入框（用Elementor的「输入字段」组件），给它设置ID为drug-search-input。
2. 添加「HTML」组件，写入以下代码：

document.getElementById('drug-search-input').addEventListener('input', function() {
  const searchInput = document.querySelector('.ninja_tables_search_input');
  if (searchInput) {
    searchInput.value = this.value;
    // 触发表格的搜索事件
    searchInput.dispatchEvent(new Event('input'));
  }
});

这样用户输入关键词时，表格会自动同步过滤结果，无需点击提交按钮。

方法3：利用Ninja Tables官方扩展（可选） #

Ninja Tables的「Advanced Filtering」扩展支持在任意页面添加独立的搜索/过滤表单，直接关联指定表格。安装扩展后，在Elementor编辑器中就能找到对应的搜索组件，配置关联你的药品表格即可快速实现跨页面搜索。

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