CODEWITHSUNDEEP
laravelautocompletetypeahead.js
Marian Pop
Marian Pop

Reputation: 361

Laravel and Typeahead.js autocomplete search [ JS errors ]

I've tried to create an autocomplete search field that populates customer names from the database.

This is what I've tried:

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

These are my routes for the SearchController:

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

And this is the code in jobs/create view:

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

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

These are the errors I'm getting in the console:

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)

Can anyone guide me in the right direction. What I've did wrong etc.

Thanks in advance.

Upvotes: 2

Views: 1925

Answers (1)

Md.Sukel Ali
Md.Sukel Ali

Reputation: 3065

Typeahead js expect data like,

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

But you send data from server,

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

update your method like below,

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

Upvotes: 2

Related Questions