laravel | Typeahead:如何组合数据库字段以显示并获取所选记录的ID?

时间:2017-04-08 19:45:03

标签: javascript jquery laravel typeahead.js laravel-5.4

我正在尝试在我的laravel 5.4项目中实现自动完成功能,到目前为止,我已经成功地只显示了一个数据库字段(名字)。这是代码

路由

 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. 格式
  3. 我还想从自动填充中获取所选用户ID,以便我可以在表单操作中传递它/home/customer/{$id}

  4. 我是javascript和jquery的新手,所以我还不明白如何做到这一点。请帮帮我

1 个答案:

答案 0 :(得分:0)

您仅获得first_name的原因是因为您只选择了第一个名称select("first_name as name"),从查询中移除了选择内容并且您将成为返回了包含所有字段的集合

e.g。

$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);
        }
    }
});