laravel | Typeahead：如何組合數據庫字段進行顯示並獲取所選記錄的ID？

Question

我試圖在laravel 5.4項目中實現自動完成功能，到目前為止，我僅顯示單個db字段（名字）就成功了。 這是代碼

路線

 Route::get('test',array('as'=>'search','uses'=>'SearchController@search'));
 Route::get('autocomplete',array('as'=>'autocomplete','uses'=>'SearchController@autocomplete'));

調節器

public function autocomplete(Request $request)
{
     $data = customer::select("first_name as name")->where("first_name","LIKE","%{$request->input('query')}%")->orderBy('first_name')->take(6)->get();
     return response()->json($data);
}

視圖

  <form method="POST" action="/home/customer/{{$id}}">
   {{ csrf_field() }} 
      <div class="input-group input-medium " style="float: right; padding-top: 3px; padding-right: 15px; ">
            <input type="text" class="typeahead form-control" required>
                   <span class="input-group-btn">
                         <button class="btn green-haze" type="submit"> <i class="fa fa-search"></i></button> 

                        </span>
      </form>
//js
<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>

所以我有兩點要弄清楚兩件事：

1. 到目前為止，以上代碼僅將first_name顯示為自動完成建議，我希望它們的格式為id - first_name last_name

2. 我還想從自動完成中獲取選定的用戶ID，以便我可以在表單操作/home/customer/{$id}傳遞它

我是javascript和jquery的新手，所以我還不了解如何執行此操作。 請幫我

Answer 1

之所以只獲得first_name是因為您僅選擇了名字， select("first_name as name") ，從查詢中刪除了select，因此您將返回一個包含所有字段的集合

例如

$data = customer::where("first_name","LIKE","%{$request->input('query')}%")->orderBy('first_name')->take(6)->get();

然后，在您的JavaScript回調中， data將有權訪問找到的每個記錄及其字段。

編輯

使用Typeahead，您可以定義回調，以便可以使用返回的數據，例如：

$('input.typeahead').typeahead({
    source: {
        groupName: {
            // Ajax Request
            ajax: {
                url: "{{ route('autocomplete') }}"
            }
        }
    },
    callback: {
        onResult: function (node, query, result, resultCount, resultCountPerGroup) {
            console.log(node, query, result, resultCount, resultCountPerGroup);
        }
    }
});