如何使用Laravel和Vue js搜索数据?

时间:2020-05-15 19:42:19

标签: laravel vue.js

我想创建一个搜索栏,用户可以在其中搜索和查找匹配的结果,其中包括3列工作名称,公司名称和国家/地区。

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

问题在于它仅从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>

1 个答案:

答案 0 :(得分:1)

由于只有一个输入,因此您可以在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);
}