- var page_Title = 'Select2';
- var page_select3          = true;
- var select2_options       = true;
- var custom_select2        = true;
- var theme_customizer      = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var scrollbar             = true;
- var height_equal          = true;
doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/loader
    include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container.w-full
            .page-title
              .grid.grid-cols-12.mx-2.items-center
                div(class="col-span-6 sm:col-span-12")
                  h3
                    | Select2
                div(class="col-span-6 sm:col-span-12")
                  ol.breadcrumb.flex
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Form Widgets
                    li.breadcrumb-item.active Select2
          // Container-fluid starts
          .container
            .select2-drpdwn
              .grid.grid-cols-12.card-gap
                // Tagify select2 start
                div(class="col-span-12")
                  .card 
                    .card-header 
                      h5 Single-value Select
                      p.f-m-light.mt-1 
                        | Use tagify plugin for drag and sort options available.
                    .card-body 
                      form.grid.grid-cols-12.gap-3
                        div(class="col-span-3 xl:col-span-6 sm:col-span-12")
                          input.selectMode.bg-light-primary(name='tags-select-mode' placeholder='Please select')
                        div(class="col-span-3 xl:col-span-6 sm:col-span-12")
                          input.selectMode.bg-light-secondary(name='tags-select-value-mode' placeholder='Please select')
                        div(class="col-span-3 xl:col-span-6 sm:col-span-12")
                          input.selectMode.bg-light-primary(name='tags-select-v-mode' placeholder='Please select')
                        div(class="col-span-3 xl:col-span-6 sm:col-span-12")
                          input.selectMode.bg-light-secondary(name='tags-s-value-mode' placeholder='Please select')
                div(class="col-span-6 sm:col-span-12")
                  .card
                    .card-header
                      h5 Default Select 
                      p.f-m-light.mt-1 
                        | Use tagify plugin for select options and edit.
                    .card-body
                      form
                        input(name='basic' value='tag1, tag2, tag3, tag4 autofocus')
                div(class="col-span-6 sm:col-span-12") 
                  .card 
                    .card-header 
                      h5 Random Suggestions
                      p.f-m-light.mt-1 
                        | Use tagify plugin for select options.
                    .card-body 
                      form
                        input.some_class_name(name='input-custom-dropdown' placeholder='write some tags' value='tivo, roxo, sheltos, viho, zeta, koho')
                div(class="col-span-6 sm:col-span-12") 
                  .card 
                    .card-header 
                      h5 Colors Select Options
                      p.f-m-light.mt-1 
                        | Use tagify plugin for select colors options.
                    .card-body 
                      form
                        input(name='tags3' value='[{"value":"point"}, {"value":"soft"}, {"value":"horse"}, {"value":"flood"}, {"value":"asset"}]' pattern='^[A-Za-z_✲ ]{1,15}$')
                div(class="col-span-6 sm:col-span-12") 
                  .card 
                    .card-header 
                      h5 Flags Selection
                      p.f-m-light.mt-1 
                        | Use tagify plugin for select flags options.
                    .card-body 
                      form
                        input.countries(name='tags3-1' placeholder='Try to add tags from the list')
                div(class="col-span-6 md:col-span-12")
                  .card
                    .card-header 
                      h5 Readonly Options
                      p.f-m-light.mt-1 
                        | Use tagify plugin for readonly options.
                    .card-body 
                      form
                        input(name='tags4' readonly='' value='tag1, tag 2, another tag')
                div(class="col-span-6 md:col-span-12")
                  .card
                    .card-header 
                      h5 Read and Write Options
                      p.f-m-light.mt-1 
                        | Use tagify plugin for read and write options.
                    .card-body 
                      form
                        input.readonlyMix(name='tags-readonly-mix' placeholder='Type something' value='[\
                        {\
                        "value"    : "foo",\
                        "readonly" : true,\
                        "title"    : "read-only tag"\
                        },\
                        {\
                        "value"    : "bar"\
                        },\
                        {\
                        "value"    : "Locked tag",\
                        "readonly" : true,\
                        "title"    : "Another readonly tag"\
                        }\
                        ]')
                div(class="col-span-6 md:col-span-12")
                  .card
                    .card-header 
                      h5 Disabled Readonly
                      p.f-m-light.mt-1 
                        | Use tagify plugin for readonly option available.
                    .card-body 
                      form
                        input(name='disabledInput' disabled='' value='tag1, tag 2, another tag')
                div(class="col-span-6 md:col-span-12")
                  .card
                    .card-header 
                      h5 Customize Emails
                      p.f-m-light.mt-1 
                        | Use tagify plugin for select email options.
                    .card-body 
                      form
                        input.customLook(value='pixelstrap.theme@website.com')
                        button(type='button' class="text-center") +
                div(class="col-span-6 md:col-span-12")
                  .card
                    .card-header 
                      h5 Telephone Input
                      p.f-m-light.mt-1 
                        | Select country and enter your telephone number.
                    .card-body 
                      form.international-num
                        input#country(type='tel')
                div(class="col-span-6 md:col-span-12")
                  .card
                    .card-header 
                      h5 Movie Suggestions
                      p.f-m-light.mt-1 
                        | Use tagify plugin for select movie options.
                    .card-body 
                      form
                        textarea(name='tags2' placeholder='Enter movie names')
                          | [{&quot;value&quot;:&quot;Hot Sit&quot;}, {&quot;value&quot;:&quot;The Matrix&quot;}]
                div(class="col-span-6 md:col-span-12") 
                  .card
                    .card-header 
                      h5 Autocomplete Words
                      p.f-m-light.mt-1 
                        | Enter any letter and display autocomplete words.
                    .card-body 
                      form.international-num.grid.grid-cols-12
                        div(class="col-span-12")
                          label(for="autokeyword") Search programming language 
                        div(class="col-span-12")
                          input#autokeyword(type='text' placeholder='Search..' onkeyup='getValue(this.value)') 
                          .results
                div(class="col-span-6 md:col-span-12")
                  .card
                    .card-header 
                      h5 Select input using search option
                      p.f-m-light.mt-1 
                        | Use search option through select any options.
                    .card-body 
                      .select-box(class="[@media(max-width:320px)]:w-[242px]")
                        .options-container.custom-scrollbar(class="[@media(min-width:768px)_and_(max-width:1006px)]:max-w-[calc(295px_+_(350_-_295)_*_((100vw_-_1007px)_/_(1006_-_768)))]")
                          .selection-option
                            input#webdesigner.radio(type='radio' name='category')
                            label.mb-0(for='webdesigner') web&ndash;designer
                          .selection-option
                            input#film.radio(type='radio' name='category')
                            label.mb-0(for='film') Film &amp; animation
                          .selection-option
                            input#software.radio(type='radio' name='category')
                            label.mb-0(for='software') Software engineer
                          .selection-option
                            input#art.radio(type='radio' name='category')
                            label.mb-0(for='art') Art
                          .selection-option
                            input#music.radio(type='radio' name='category')
                            label.mb-0(for='music') Music
                          .selection-option
                            input#travel.radio(type='radio' name='category')
                            label.mb-0(for='travel') Travel &amp; events
                          .selection-option
                            input#sports.radio(type='radio' name='category')
                            label.mb-0(for='sports') Sports
                          .selection-option
                            input#news.radio(type='radio' name='category')
                            label.mb-0(for='news') News &amp; politics
                          .selection-option
                            input#tutorials.radio(type='radio' name='category')
                            label.mb-0(for='tutorials') Tutorials
                        .selected-box(class="[@media(min-width:768px)_and_(max-width:1006px)]:max-w-[calc(295px_+_(350_-_295)_*_((100vw_-_1007px)_/_(1006_-_768)))]")
                          | Select Your Profession
                        .search-box
                          input(type='text' class="[@media(min-width:768px)_and_(max-width:1006px)]:max-w-[calc(295px_+_(350_-_295)_*_((100vw_-_1007px)_/_(1006_-_768)))]" placeholder='Start Typing...')
                div(class="col-span-12")
                  .card 
                    .card-header 
                      h5 Render suggestions list manually
                      p.f-m-light.mt-1 
                        | Use tagify plugin for select random options.
                    .card-body 
                      form
                        input(name='tags-manual-suggestions' placeholder='write some tags')
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
