Multiple selection dropdown widget, UI

[Ron Chatterjee]

 duration_str = ('Month or less', '6 months', '1 year')

Field('duration', type='list:string',requires=IS_IN_SET((duration_str), multiple=True),widget=lambda field, value: SQLFORM.widgets.multiple.widget(field, value, size=3, style='divs', label=True)),

This create a multiple selection but the UI is very generic. Wondering if any widget will give me an UI similar to the link below (explained in pic) with tags?

http://semantic-ui.com/modules/dropdown.html

See section
"Multiple Selection

A selection dropdown can allow multiple selections

"

[Ron Chatterjee]

I guess, I can do something similar to this:

https://groups.google.com/forum/#!topic/web2py/miYi2aHXo6A

But doesn't do multiple selection.

[Ron Chatterjee]

I guess this is all I had to do.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"

    rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>

<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css"

    rel="stylesheet" type="text/css" />

<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"

    type="text/javascript"></script>

<script type="text/javascript">

    $(function () {

        $('#Project_duration').multiselect({

            includeSelectAllOption: true

        });

    });

</script>

It works! 

[Carlos Zenteno]

Thank for asking and answering yourself. I am sure somebody will find it useful.

[Carlos Zenteno]