- var page_Title = 'Typeahead';
- var theme_customizer      = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var scrollbar             = true;
- var typeahead             = 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
                    | Typeahead
                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 Typeahead
          // Container-fluid starts
          .container
            .alert.txt-primary.alert-bg-primary.alert-dismissible.fade.show.common-alert(role='alert')
              i(data-feather='alert-triangle')
              p(class="[@media(max-width:767px)]:line-clamp-[1]")
                | 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
              .grid.grid-cols-12.card-gap
                div(class="col-span-6 md:col-span-12")
                  .card
                    .card-header
                      h5 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')
                div(class="col-span-6 md:col-span-12")
                  .card
                    .card-header
                      h5 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')
                div(class="col-span-6 md:col-span-12")
                  .card
                    .card-header
                      h5 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')
                div(class="col-span-6 md:col-span-12")
                  .card
                    .card-header
                      h5 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')
                div(class="col-span-6 md:col-span-12")
                  .card
                    .card-header
                      h5 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')
                div(class="col-span-6 md:col-span-12")
                  .card
                    .card-header
                      h5 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')
                div(class="col-span-6 md:col-span-12")
                  .card
                    .card-header
                      h5 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')
                div(class="col-span-6 md:col-span-12")
                  .card
                    .card-header
                      h5 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
