Поиск автозаполнения Laravel и Typeahead.js [ошибки JS] - PullRequest
Новая
       31

Поиск автозаполнения Laravel и Typeahead.js [ошибки JS]

1 голос
/ 26 марта 2019

Я пытался создать поле поиска автозаполнения, которое заполняет имена клиентов из базы данных.

Это то, что я пробовал:

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)

Может кто-нибудь направить меня в правильном направлении.Что я сделал не так и т. Д.

Заранее спасибо.

1 Ответ

1 голос
/ 27 марта 2019

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