Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Select2 and Laravel: Ajax Autocomplete
<?php
/* For more details see: http://laraget.com/blog/select2-and-laravel-ajax-autocomplete */
namespace App\Http\Controllers\Select2Ajax;
use App\Tag;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\Http\Controllers\Controller;
class TagController extends Controller
{
/**
* @param Request $request
* @return \Illuminate\Http\JsonResponse
*/
public function find(Request $request)
{
$term = trim($request->q);
if (empty($term)) {
return \Response::json([]);
}
$tags = Tag::search($term)->limit(5)->get();
$formatted_tags = [];
foreach ($tags as $tag) {
$formatted_tags[] = ['id' => $tag->id, 'text' => $tag->name];
}
return \Response::json($formatted_tags);
}
}
{{-- For more details see: http://laraget.com/blog/select2-and-laravel-ajax-autocomplete --}}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>Select2 Ajax Example</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<form>
<div class="form-group">
<label for="tag_list">Tags:</label>
<select id="tag_list" name="tag_list[]" class="form-control" multiple></select>
</div>
</form>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script>
$('#tag_list').select2({
placeholder: "Choose tags...",
minimumInputLength: 2,
ajax: {
url: '/tags/find',
dataType: 'json',
data: function (params) {
return {
q: $.trim(params.term)
};
},
processResults: function (data) {
return {
results: data
};
},
cache: true
}
});
</script>
</body>
</html>
<?php
/* For more details see: http://laraget.com/blog/select2-and-laravel-ajax-autocomplete */
Route::get('/tags', function() {
return view('tags');
});
Route::get('/tags/find', 'Select2Ajax\TagController@find');
@carusogabriel

This comment has been minimized.

Copy link

commented Oct 4, 2017

How can this be done within a Controller protected by middleware auth? I've tried appending the X-CSRF-TOKEN to my ajax, but without success!

@cocochepeau

This comment has been minimized.

Copy link

commented Oct 14, 2017

@gabriel-caruso Since it's a GET request, you don't need to append the CSRF token. Am I right?

@xmarks

This comment has been minimized.

Copy link

commented Oct 23, 2017

@gabriel-caruso
You can simply protect the url:
url: '/tags/find',

In this case, on TagController.php you can add:

public function __construct()
    {
        // Only Authenticated Users can access
        $this->middleware('auth');
    }

Or you can do this from the Routes

@nachofassini

This comment has been minimized.

Copy link

commented Dec 6, 2017

@gabriel-caruso see this link

@vermaboys

This comment has been minimized.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.