时间戳

首页 > 解决方案 > 在 Laravel 5.5 中使用 Typeahead.js 使用两个表格列进行自动完成搜索

php - 在 Laravel 5.5 中使用 Typeahead.js 使用两个表格列进行自动完成搜索

问题描述

我有一个如下所示的数据库：

-------------------------------------
| id | FirstName | LastName | Email |
-------------------------------------
|  1 |    Test   | Customer | null  |
|  2 |    Some   |   Name   | null  |
-------------------------------------

现在我想要的是通过匹配名字和姓氏来获取客户的 id ......如果在一行中找到它们，那么去获取 id。

我正在使用 Laravel 5.5.28 并尝试了 Typeahead.js 以实现我最初想要的，但由于某种原因，我只能使其与 FirstName 或 LastName 的一列一起使用。

这是工作代码（仅适用于名字）：

CDN的

  <script src="{{ asset('js/vendor/jquery.min.js') }}"></script>
  <script src="{{ asset('js/vendor/popper.min.js') }}"></script>
  <script src="{{ asset('js/vendor/bootstrap.min.js') }}"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>

搜索控制器.php 

public function autocomplete(Request $request)
    {
        $datas = Customers::select("FirstName")
                 ->where("FirstName", "LIKE","%{$request->input('query')}%")
                 ->get();

        $dataModified = array();
        foreach ($datas as $data)
        {
            $dataModified[] = $data->FirstName;
        }

        return response()->json($dataModified);
    }
}

在“JobsController.php”中获取 id

public function store(Request $request)
    {
        $job =  new Jobs;
        $job->cust_id = Customers::where('FirstName', $request->input('customer_name'))->value('id');

        dump($job->cust_id);
    }

这是视图：

{!! Form::open(['action' => 'JobsController@store', 'method' => 'POST']) !!}

{{Form::text('customer_name', '', ['class' => 'form-control typeahead', 'placeholder' => 'Type in customer name...'])}}
{{Form::submit('Create Job', ['class' => 'btn btn-primary mt-2'])}}

{!! Form::close() !!}

路线

Route::get('jobs.create', 'SearchController@index')->name('search');
Route::get('autocomplete', 'SearchController@autocomplete')->name('autocomplete');

jQuery

<script type="text/javascript">
     var path = "{{ route('autocomplete') }}";
       $('input.typeahead').typeahead({
         source: function(query, process) {
         return $.get(path, { query: query }, function(data) {
         return process(data);
        });
           }
            });
</script>

现在这工作得很好，但只适用于名字。我想要的是让它适用于全名（名字+姓氏）

我设法使它与 FirstName 和 LastName 一起工作，但只是在“前端”......它没有从数据库中获取 id。

这是我为了在自动完成建议中同时包含 FirstName 和 LastName 所做的（开始输入时）：

搜索控制器.php

public function autocomplete(Request $request)
    {
        $datas = Customers::select("FirstName", "LastName")
                 ->where("FirstName", "LIKE","%{$request->input('query')}%")
                 ->get();

        $dataModified = array();
        foreach ($datas as $data)
        {
            $dataModified[] = $data->FirstName .' '. $data->LastName;
        }

        return response()->json($dataModified);
    }

它在输入时同时显示名字和姓氏，但它返回一个空的“id”。

我希望能够在查询中同时使用 FirstName 和 LastName 列，因此只有在 FirstName 和 LastName 匹配时才能获得 id。

期待你的想法。

谢谢你的时间。真的很感激。

更新#1

与此同时，我已经更改了SearchController中的查询，所以我认为这里的代码现在可以了：

$datas = Customers::select("FirstName", "LastName")
                    ->where(function($q) use($request) {
                        $q->where("FirstName", "LIKE","%{$request->input('query')}%")
                          ->orWhere("LastName", "LIKE","%{$request->input('query')}%");
                    })->get();

唯一的问题是我仍然得到“空”ID。

可能是因为我试图获取 id 的方式？

在JobsController我有这样的“存储”方法：

public function store(Request $request)
    {
        $job =  new Jobs;
        $job->cust_id = Customers::where('FirstName', $request->input('customer_name'))
                                    ->orWhere('LastName', $request->input('customer_name'))
                                    ->value('id');

    }

这是获取ID的正确方法吗？

更新#2

我担心 $request->input 没有返回正确的格式，因此我在查询中得到一个“空”id，但我错了，因为一个简单的 dump(); 表明 $request->input 正在返回预期的字符串。

我真的没有主意了。也许我应该使用不同的方式来获取 id ？喜欢在 url 中使用 id 吗？

非常感谢任何想法和建议。谢谢你。

标签： phpjquerylaravelautocomplete

解决方案

我使用下面的代码工作正常

我的控制器功能

public function Search(Request $request)
{
    $data = Account::Join('groups','groups.group_id','=','accounts.group_id')->select("accounts.name","accounts.account_id","groups.group_name")
            ->where("name","LIKE","%".Input::get('query')."%")
            ->get()->toArray();

    return response()->json($data);
}

我的推特提前输入

var data = new Bloodhound({
          datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
          queryTokenizer: Bloodhound.tokenizers.whitespace,
          prefetch: "{{route('accounts/search')}}",
          remote: {
            url: "{{url('accounts/search')}}?query=%query",
            transform: function(list) {
                    return $.map(list, function(k,v) { return { id: k.account_id, name: k.name,group:k.group_name }; });
                },
            wildcard: '%query'
          }
        });

        $('.typeahead').typeahead(null, {
            hint: true,
            limit:100,
            highlight: true,
            minLength: 1,
            name: 'Accounts',
            displayKey: function(k) {
               return k.name + " - ("+k.group+")";
            },
              source: data,
              templates: {
                empty: [
                  '<div class="empty-message">',
                    '<span><strong>Account Not Found</strong></span><br/>',
                    '<button type="button" class="btn btn-info" id="account_modal">+ Add New Account</button>',
                  '</div>'
                ].join('\n'),
              }
        }).on('typeahead:selected', function (e, suggestion, name) {
            $(this).parent().next().val(suggestion.id);
            $(this).parent().next().next().remove();
        });

推荐阅读