Laravel和Typeahead.js自动完成搜索[JS错误]

Question

我试图创建一个自动填充搜索字段，用于填充数据库中的客户名称。

这就是我尝试过的：

SearchController：

<?php

namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Customers;

class SearchController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */

    public function index()
    {
        return view('jobs.create');
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */

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

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

这些是我的SearchController路由：

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

这是作业/创建视图中的代码：

<input type="text" id="username" class="form-control typeahead" placeholder="Type in customer's name...">

<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>

CDN的

<!-- jQuery & Typeahead.js -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>

这些是我在控制台中遇到的错误：

create:277 Uncaught TypeError: $(...).alert is not a function
    at create:277
(anonymous) @ create:277
6bootstrap3-typeahead.min.js:1 Uncaught TypeError: b.toLowerCase is not a function
    at b.matcher (bootstrap3-typeahead.min.js:1)
    at bootstrap3-typeahead.min.js:1
    at Function.grep (jquery.js:753)
    at b.process (bootstrap3-typeahead.min.js:1)
    at proxy (jquery.js:818)
    at Object.success (create:309)
    at i (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at A (jquery.min.js:4)
    at XMLHttpRequest.<anonymous> (jquery.min.js:4)

任何人都可以指导我正确的方向。我做错了什么等

提前致谢。

Answer 1

Typeahead js期望数据，如，

[{"first_name_one"},{"first_name_two"},{"first_name_three"}];

但是你从服务器发送数据，

[{"first_name": "first_name_one"},{"first_name":"first_name_two"},{"first_name": "first_name_three"}];

更新你的方法如下，

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