I am using typeahead in my current project along with simple query search. The simple query search is working perfectly but, the typeahead is partially working i.e SearchController@autocomplete is responding with JSON and in app.blade.php i have typeahead jquery script that script is not rendering/converting json into HTML elements.
Even the console is not giving any errors. I am not able to understand the behind the scene of the problem. I am providing all by source code.
app.blade.php
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/typeahead.js"></script>
<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>
@yield('scripts')
</body>
</html>
navbar.blade.php
<form class="navbar-form navbar-left" role="search" action="/search" autocomplete="off">
<div class="form-group">
<input type="text" class="typeahead form-control" id="query" placeholder="Search Staff By Name, Designation, Department" name="query" value="{{Request::input('query')}}">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
routes/web.php
/** * Search Controller Starts */
Route::get('/search', 'SearchController@getResults');
Route::get('/autocomplete',[
'uses'=>'SearchController@autocomplete',
'as'=>'autocomplete'
]);
/**
* Search Controller Ends
*/
SearchController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Auth;
use App\User;
use DB;
class SearchController extends Controller
{
public function getResults(Request $request)
{ $query = $request->input('query');
if(!$query){
return redirect('/home');
}
$users = User::where(DB::raw("CONCAT(first_name,'',last_name)"), '
LIKE', "%{$query}%")
->orwhere('name', 'LIKE', "%{$query}%")
->orwhere('department', 'LIKE', "%{$query}%")
->orwhere('designation', 'LIKE', "%{$query}%")
->orwhere('email', 'LIKE', "%{$query}%")
->orwhere('phone', 'LIKE', "%{$query}%")
->get();
return view('search')->with('users', $users);
}
public function autocomplete(Request $request){
$data = User::where("name","LIKE","%{$request->input('query')}%")->get();
return response()->json($data);
}
}
Some Screen Shots
