时间戳

首页 > 解决方案 > 如何使用 Laravel 和 Vue js 搜索数据？

laravel - 如何使用 Laravel 和 Vue js 搜索数据？

问题描述

我想创建一个搜索栏，用户可以在其中搜索并按 3 列查找匹配的结果，即 job_title、company_name 和 country。

我能够使用计算属性通过其中一列创建搜索过滤器。

问题是它仅从 job_title 列返回匹配记录，而不是所有 3 列。有没有办法为此添加多个列？我尝试return jobPost.match(this.search);而不是return jobPost.job_title.match(this.search);获取整个表格，但这只是返回了一个错误。

data() {
            return {
                jobPosts: [],
                search: ''

            };
        },

computed: {
            filteredJobs: function() {
                return this.jobPosts.filter((jobPost) => {
                    return jobPost.job_title.match(this.search);
                })
            }
        }

CandidateSearchController.php 文件：

public function search(Request $request)
    {
        $search = $request->get('q');
        $jobPosts = JobPost::with('employerprofile')
            ->where('job_title', 'like', '%'.$search.'%')
            ->get();

        return Response::json(array(
            'jobPosts' => $jobPosts,
        ), 200);
    }

搜索输入和按钮：

<input type="text" v-model="search" placeholder="Search job titles.."/>
<button class="btn btn-primary" style="padding: 7px 10px; margin-top: -1px;">
   <i class="fas fa-search"></i>
</button>

标签： laravelvue.js

解决方案

由于您只有一个输入，您可以在 sql 查询本身中使用 OR 将给定的字符串与职位、公司和国家/地区相匹配

public function search(Request $request)
{
    $search = $request->get('q');
    $jobPosts = JobPost::with('employerprofile')
    ->where('job_title', 'like', '%'.$search.'%')
    ->where(function($q) {
        $q->where('job_title', 'like', '%'.$search.'%')
           ->orWhere('company_name', 'like', '%'.$search.'%');
           ->orWhere('country', 'like', '%'.$search.'%');
    })
    ->get();

    return Response::json(array(
        'jobPosts' => $jobPosts,
    ), 200);
}

推荐阅读