Community Post

How to work with Bootstrap Tags Input in Laravel

Pham Tien Thanh
👁️ 0 views
💬 comments

Bootstrap Tags Input is a JQuery plugin providing a Twitter Bootstrap user interface for managing tags.

Features

Bootstrap tags Input plugin provides the following features :

  • Objects as tags
  • True multi value
  • Typeahead
  • Designed for Bootstrap 2.3.2 and 3
  • Objects as tags

Example can be found at its own github sites : https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/

Typeahead support

Typeahead is not included in Bootstrap 3, so you'll have to include your own typeahead library. I'd recommed twitter typeahead.js and it can be downloaded from the following site :

Twitter Typeahead JS : https://twitter.github.io/typeahead.js/

Mix them up using Laravel as server side

In this case, let build function in a HRM (Human Resource Management) system which allow us to add employee's skill as input tags. What we are going to build look as just simple as the following screen:

Table definitions

First of all, let define the tables that we are going to use in this sample. We need a master table which hold the information about the skill that employee might have such as PHP, Java, and how each skill will be display. So the table might look like this :


class CreateMstSkillsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('mstSkills', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->string('display')->nullable();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
         Schema::drop('mstSkills');
    }
}

Route definition

To display suggestion when we start to type, We need a search API which will lookin into above master tables and filter the data and return the result based on the keyword provied. It is not looking so hard to do such athing

Route::group(['prefix'=>'api','middleware' => 'auth'], function(){
    Route::get('find', function(Illuminate\Http\Request $request){
        $keyword = $request->input('keyword');
        Log::info($keyword);
        $skills = DB::table('mstSkills')->where('name','like','%'.$keyword.'%')
                  ->select('mstSkills.id','mstSkills.name','mstSkills.display')
                  ->get();
        return json_encode($skills);
    })->name('api.skills');
});

That's all we need! Result is returned in json format.

Bootstrap Tag Inputs and Twitter Typeahead js

Include the plugins

This two library can be download from their website and we are going to included them into our blade

HTML part

A text input field is needed so that we can list up the employee' skills. So let take a look

<div class="tab-pane">
    <div class="row">
        <div class="col-md-12">
            {{trans('pg_candidates.table.skills')}}
            </div>
    </div>
</div>

Note that by defining the [data-role] of text input field is "tagsinput" we tell the tags input plugin to attach itself to this text field. At the moment without any other code, we can start to write tags into the text field and see the result :

Javascript part

I lose about 2 hours to find out that the initial JS of those 2 plugin should not be put in $(document).ready(). So I suggest that you should not lose another 02 stupid like me. What we need to do next is initialize Bloodhound so that it will use our defined route and return suggestion data based on what we type.

Pham Tien Thanh

2 posts

Strategic Planning Manager @ CO-WELL Asia