- var typeahead             = true;
- var theme_customizer      = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var animate               = true;
- var scrollbar             = 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-fluid
            .page-title
              .row
                .col-6
                  h4
                    | Typeahead
                .col-6
                  ol.breadcrumb
                    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 Typeahead
          // Container-fluid starts
          .container-fluid
            .alert.txt-primary.alert-light-primary.alert-dismissible.fade.show(role='alert')
              i(data-feather='alert-triangle')
              p
                | This is the Typeahead page where 
                strong jQuery 
                |  was utilised.
              button.btn-close(type='button', data-bs-dismiss='alert', aria-label='Close')
            .typeahead.typeahead-wrapper
              .row
                .col-sm-12.col-md-6
                  .card
                    .card-header
                      h4 Basic typeahead
                      p.f-m-light.mt-1
                        |  This is the simple demo for Typeahead.
                    .card-body
                      #the-basics
                        form.theme-form
                          div
                            input.typeahead.form-control(type='text', placeholder='States of USA')
                .col-sm-12.col-md-6
                  .card
                    .card-header
                      h4 Prefetch
                      p.f-m-light.mt-1
                        | Prefetched data is fetched and processed on initialization
                    .card-body
                      #prefetch
                        form.theme-form
                          div
                            input.typeahead.form-control(type='text', placeholder='Countries')
                .col-sm-12.col-md-6
                  .card
                    .card-header
                      h4 Bloodhound (Suggestion Engine)
                      p.f-m-light.mt-1
                        | Bloodhound offers advanced functionalities such as prefetching and backfilling with remote data.
                    .card-body
                      #bloodhound
                        form.theme-form
                          div
                            input.typeahead.form-control(type='text', placeholder='States of USA')
                .col-sm-12.col-md-6
                  .card
                    .card-header
                      h4 Remote typeahead
                      p.f-m-light.mt-1
                        | Remote data is only used when the data provided by local and prefetch is insufficient
                    .card-body
                      #remote
                        form.theme-form
                          div
                            input.typeahead.form-control(type='text', placeholder='Choose Option')
                .col-sm-12.col-md-6
                  .card
                    .card-header
                      h4 Custom templates
                      p.f-m-light.mt-1
                        | Custom templates give you full control over how suggestions get rendered
                    .card-body
                      #custom-templates
                        form.theme-form
                          div
                            input.typeahead.form-control(type='text', placeholder='Oscar winners')
                .col-sm-12.col-md-6
                  .card
                    .card-header
                      h4 Multiple sections with headers
                      p.f-m-light.mt-1
                        | Two datasets that are prefetched, stored, and searched on the client. Highlighting is enabled.
                    .card-body
                      #multiple-datasets
                        form.theme-form
                          div
                            input.typeahead.form-control(type='text', placeholder='NBA and NHL teams')
                .col-sm-12.col-md-6
                  .card
                    .card-header
                      h4 Scrollable Dropdown Menu
                      p.f-m-light.mt-1 
                        | Dataset shows in scrollable dropdown menu.
                    .card-body
                      #scrollable-dropdown-menu
                        form.theme-form
                          div
                            input.typeahead.form-control(type='text', placeholder='Countries')
                .col-sm-12.col-md-6
                  .card
                    .card-header
                      h4 RTL Support
                      p.f-m-light.mt-1
                        | Dataset shows in Right Side.
                    .card-body
                      #rtl-support
                        form.theme-form
                          div
                            input.typeahead.form-control(type='text', dir='rtl', placeholder='Countries')
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
