Laravel Dynamic Autocomplete Search using Select2 JS Ajax – Part 1

Laravel Dynamic Autocomplete Search using Select2 JS Ajax – Part 1

In this post we will give you information about Laravel Dynamic Autocomplete Search using Select2 JS Ajax – Part 1. Hear we will give you detail about Laravel Dynamic Autocomplete Search using Select2 JS Ajax – Part 1And how to use it also give you demo for it if it is necessary.

Today, I am going to share with you how to make dynamic autocomplete select dropdown from database using select2.js plugin in our Laravel 5 application.

Why we have to use autocomplete for our project ?, Sometimes we have more or thousands of records on our tables like users, products, tags etc, so that can not possible to handle in manage from select box. But you must require to make select dropdown for your products tables then you can do it using select2.js plugin. I already post autocomplete with Bootstrap Typeahead Plugin(Laravel 5 Autocomplete using Bootstrap Typeahead JS Example with Demo), But it is not possible with dropdown like key and value, This post will help to implement select box autocomplete value using select2 js ajax.

In this tutorial, i going to give you full example from scratch so you can easily understand and implement it on your project. You have to just follow few step to done this example. I also give you demo for testing in Part 2. So you can also see the demo on the next part. After finish this example you will see out put like as bellow screenshot:

Preview:

Step 1 : Install Laravel Application

we are going from scratch, So we require to get fresh Laravel 5.3 application using bellow command, So open your terminal OR command prompt and run bellow command:

composer create-project --prefer-dist laravel/laravel blog

Step 2 : Database Configuration

In this step, we require to make database configuration, you have to add following details on your .env file.

1.Database Username

2.Database Password

3.Database Name

In .env file also available host and port details, you can configure all details as in your system, So you can put like as bellow:

.env

DB_HOST=localhost

DB_DATABASE=homestead

DB_USERNAME=homestead

DB_PASSWORD=secret

Also see:Multi select autocomplete jquery example with code

Step 3: Create categories Table

In this step we have to create migration for categories table using Laravel 5.3 php artisan command, so first fire bellow command:

php artisan make:migration create_category_table

After this command you will find one file in following path database/migrations and you have to put bellow code in your migration file for create categories table.

<?php


use IlluminateSupportFacadesSchema;

use IlluminateDatabaseSchemaBlueprint;

use IlluminateDatabaseMigrationsMigration;


class CreateCategoryTable extends Migration

{

/**

* Run the migrations.

*

* @return void

*/

public function up()

{

Schema::create('categories', function (Blueprint $table) {

$table->increments('id');

$table->string('name');

$table->timestamps();

});

}


/**

* Reverse the migrations.

*

* @return void

*/

public function down()

{

Schema::drop('categories');

}

}


Now we require to run migration be bellow command:

php artisan migrate

After create “categories” table, we should have some dummy data for testing, So make sure that.

Step 4: Create Route

In this is step we need to create route for form layout file and another one for ajax request. so open your routes/web.php file and add following route.

routes/web.php

Also see:PHP – autocomplete websites with domain and logo using clearbit API

Route::get('select2-autocomplete', 'Select2AutocompleteController@layout');

Route::get('select2-autocomplete-ajax', 'Select2AutocompleteController@dataAjax');

Ok Now we will see last two step in next page, so click on bellow button.

Hope this code and post will helped you for implement Laravel Dynamic Autocomplete Search using Select2 JS Ajax – Part 1. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

38  +    =  42

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US