You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Laravel实现仅按最新条件搜索并清除历史查询字段方案

Laravel 实现仅按最新查询条件搜索并清除历史搜索内容

比如我们先通过姓名/手机号/身份证号搜索教师列表,之后切换到性别或学历字段进行搜索时,只需要应用当前选中的查询条件,无需保留之前其他字段的搜索内容。

前端表单实现

<form class="ml-2" id="searchForm">
    <div class="form-group row">
        <div class="col-lg-3">
            <input type="text" name="search" class="form-control float-right"
                   placeholder="搜索姓名/手机号/身份证号" value="{{ request('search') }}">
        </div>
        <div class="col-lg-3">
            <select class="form-control" name="gender">
                <option selected disabled>性别</option>
                <option value="man" {{request('gender') == 'man' ? 'selected' : ''}}>男</option>
                <option value="woman" {{request('gender') == 'woman' ? 'selected' : ''}}>女</option>
            </select>
        </div>
        <div class="col-lg-3">
            <select class="form-control" name="education">
                <option selected disabled>学历</option>
                <option value="associate" {{request('education') === 'associate' ? 'selected' : '' }}>大专</option>
                <option value="post_associate" {{request('education') === 'post_associate' ? 'selected' : ''}}>专升本</option>
                <option value="bachelor" {{request('education') === 'bachelor' ? 'selected' : ''}}>本科</option>
                <option value="master" {{request('education') === 'master' ? 'selected' : ''}}>硕士</option>
                <option value="doctoral" {{request('education') === 'doctoral' ? 'selected' : ''}}>博士</option>
            </select>
        </div>
        <div class="col-lg-3">
            <button type="submit" class="btn btn-primary w-100" onclick="clearUnusedFields()">搜索</button>
        </div>
    </div>
</form>

添加JS函数实现未使用字段清空:

function clearUnusedFields() {
    const form = document.getElementById('searchForm');
    const inputs = form.querySelectorAll('input, select');
    
    inputs.forEach(input => {
        // 清空默认选中的禁用提示选项
        if (input.tagName === 'SELECT' && input.selectedIndex === 0) {
            input.value = '';
        } 
        // 清空空文本输入框
        else if (input.tagName === 'INPUT' && input.value.trim() === '') {
            input.value = '';
        }
    });
}

后端控制器处理

public function index(Request $request)
{
    $teachers = Teacher::teacherSearch($request);
    $teachers = $teachers->latest()->paginate(env('PAGINATION_SIZE'));

    return view('admin.teachers.all', compact('teachers'));
}

模型查询逻辑

在Teacher模型中定义静态方法处理搜索条件:

public static function teacherSearch(Request $request)
{
    $query = Teacher::query();

    $search = $request->input('search');
    $gender = $request->input('gender');
    $education = $request->input('education');

    if ($search) {
        $query->where('full_name', $search)
              ->orWhere('mobile', $search)
              ->orWhere('national_code', $search);
    }

    if($gender) {
        $query->where('gender', $gender);
    }

    if($education) {
        $query->where('degree_of_education', $education);
    }

    return $query;
}

实现说明

前端通过JS函数在提交时清空未使用的字段,确保请求仅携带当前有效的查询参数;后端根据接收到的参数动态构建查询语句,仅应用最新的搜索条件,不会保留历史搜索痕迹。

内容的提问来源于stack exchange,提问作者mahnaz

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.09 01:21:04