如何为主数据列表页集成带动态字段的自定义搜索功能？

我来给你梳理个完全适配你技术栈的方案，在CodeIgniter 4 + jQuery的项目里亲测好用，刚好能解决你不想展示20个搜索框的痛点👇

一、前端实现（jQuery + 原生HTML） #

先搭好极简的搜索栏结构，用下拉菜单选要搜索的字段，搭配输入框和搜索按钮，完全不依赖任何网格库：

<!-- 搜索栏区域 -->
<div class="search-bar">
  <select id="search-field" class="form-control">
    <option value="">请选择搜索字段</option>
    <option value="name">姓名</option>
    <option value="email">邮箱</option>
    <option value="phone">手机号</option>
    <!-- 把你20个数据库字段都加在这里，value对应数据库字段名 -->
  </select>
  <input type="text" id="search-value" class="form-control" placeholder="输入搜索内容...">
  <button id="submit-search" class="btn btn-primary">搜索</button>
</div>

<!-- 数据列表容器，用你自己的列表结构即可 -->
<div id="data-list">
  <!-- 这里会通过jQuery动态渲染数据 -->
</div>

然后写jQuery的交互逻辑，还加了防抖优化避免频繁请求：

$(document).ready(function() {
  // 防抖函数：防止用户快速点击或连续输入触发多次请求
  let searchTimeout;
  function debounceSearch() {
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(performSearch, 300);
  }

  // 绑定搜索触发事件：按钮点击 + 输入框回车
  $('#submit-search').on('click', debounceSearch);
  $('#search-value').on('keyup', function(e) {
    if(e.keyCode === 13) debounceSearch();
  });

  // 核心搜索请求逻辑
  function performSearch() {
    const field = $('#search-field').val();
    const value = $('#search-value').val().trim();

    // 基础验证：没选字段就提示
    if(!field) {
      alert('请先选择要搜索的字段');
      return;
    }
    // 没输入值的话返回全部数据
    if(!value) {
      loadAllData();
      return;
    }

    // 发AJAX请求到后端
    $.ajax({
      url: '/master-data/search', // 替换成你的CI4控制器路由
      method: 'POST',
      data: {
        field: field,
        value: value
      },
      dataType: 'json',
      success: function(response) {
        // 动态渲染列表内容
        let html = '';
        if(response.data.length > 0) {
          response.data.forEach(item => {
            html += `<div class="list-item">
                      <p>姓名：${item.name}</p>
                      <p>邮箱：${item.email}</p>
                      <!-- 按需渲染你要展示的字段 -->
                    </div>`;
          });
        } else {
          html = '<p class="no-data">暂无匹配数据</p>';
        }
        $('#data-list').html(html);
      },
      error: function() {
        alert('搜索请求失败，请稍后重试');
      }
    });
  }

  // 页面初始化加载全部数据
  function loadAllData() {
    $.ajax({
      url: '/master-data/get-all',
      method: 'GET',
      dataType: 'json',
      success: function(response) {
        let html = '';
        if(response.data.length > 0) {
          response.data.forEach(item => {
            html += `<div class="list-item">
                      <p>姓名：${item.name}</p>
                      <p>邮箱：${item.email}</p>
                    </div>`;
          });
        } else {
          html = '<p class="no-data">暂无数据</p>';
        }
        $('#data-list').html(html);
      }
    });
  }

  // 页面加载完成后自动拉取全部数据
  loadAllData();
});

二、后端实现（CodeIgniter 4） #

重点用CI4的Query Builder构造查询，绝对不要直接拼SQL字符串，彻底避免SQL注入风险：

1. 控制器逻辑 #

在你的主数据控制器里写两个核心方法：

<?php

namespace App\Controllers;

use App\Controllers\BaseController;

class MasterData extends BaseController
{
    // 获取全部主数据
    public function getAll()
    {
        $model = new \App\Models\MasterDataModel();
        $data = $model->findAll();
        
        return $this->response->setJSON([
            'status' => 'success',
            'data' => $data
        ]);
    }

    // 处理搜索请求
    public function search()
    {
        // 白名单验证：只允许预先定义的字段被搜索，更安全
        $validation = \Config\Services::validation();
        $rules = [
            'field' => 'required|in_list[name,email,phone,department,...]', // 把20个字段都列在这里
            'value' => 'required|trim'
        ];

        if (!$this->validate($rules)) {
            return $this->response->setJSON([
                'status' => 'error',
                'message' => $validation->getErrorString()
            ]);
        }

        $field = $this->request->getPost('field');
        $value = $this->request->getPost('value');

        // 模糊查询（如果需要精确搜索，把like改成where即可）
        $model = new \App\Models\MasterDataModel();
        $data = $model->like($field, $value)->findAll();

        return $this->response->setJSON([
            'status' => 'success',
            'data' => $data
        ]);
    }
}

2. 模型配置 #

在你的数据模型里配置允许查询的字段，确保权限控制：

<?php

namespace App\Models;

use CodeIgniter\Model;

class MasterDataModel extends Model
{
    protected $table = 'master_data'; // 你的数据库表名
    protected $allowedFields = ['name', 'email', 'phone', 'department', ...]; // 20个字段全列在这里
    protected $primaryKey = 'id'; // 你的表主键
}

三、额外优化建议（可选） #

• 字段分组：如果20个字段有分类（比如用户信息、业务数据），可以给下拉菜单加optgroup分组，用户选起来更清晰：

  <select id="search-field">
    <optgroup label="用户基础信息">
      <option value="name">姓名</option>
      <option value="email">邮箱</option>
    </optgroup>
    <optgroup label="业务数据">
      <option value="department">部门</option>
      <option value="position">职位</option>
    </optgroup>
  </select>
  

• 字段类型适配：根据选中的字段动态切换输入框类型，比如日期字段用type="date"，数字字段限制输入：

  $('#search-field').on('change', function() {
    const field = $(this).val();
    const input = $('#search-value');
    if(field === 'join_date' || field === 'birth_date') {
      input.attr('type', 'date');
    } else if(field === 'age' || field === 'salary') {
      input.attr('type', 'number');
    } else {
      input.attr('type', 'text');
    }
  });
  

• 分页支持：如果数据量很大，给后端加CI4的分页逻辑，前端把分页参数和搜索参数一起传，避免一次性加载几万条数据。
• 关键词高亮：前端渲染时把匹配的关键词用<span style="color: #ff4444;">包裹，提升用户体验。

内容来源于stack exchange