Hi, Sean S

##### Typeahead

Actions
typeahead.js a flexible JavaScript library that provides a strong foundation for building robust typeaheads. typeahead.js is a fast and fully-featured autocomplete library.
For more info please visit the plugin's Demo Pageor Github Repo.

### Typeahead Examples

          <div class="card card-custom">
           <div class="card-header">
            <h3 class="card-title">
             Typeahead Examples
            </h3>
           </div>
           <!--begin::Form-->
           <form class="form">
            <div class="card-body">
             <div class="form-group row">
              <label class="col-form-label text-right col-lg-3 col-sm-12">Basic Demo</label>
              <div class="col-lg-4 col-md-9 col-sm-12">
               <div class="typeahead">
                <input class="form-control" id="kt_typeahead_1" type="text" dir="<?php echo isset( $_REQUEST['rtl'] ) && $_REQUEST['rtl'] ? 'rtl' : 'ltr' ?>" placeholder="States of USA"/>
               </div>
              </div>
             </div>
             <div class="form-group row">
              <label class="col-form-label text-right col-lg-3 col-sm-12">Bloodhound (Suggestion Engine)</label>
              <div class="col-lg-4 col-md-9 col-sm-12">
               <div class="typeahead">
                <input class="form-control" id="kt_typeahead_2" type="text" dir="<?php echo isset( $_REQUEST['rtl'] ) && $_REQUEST['rtl'] ? 'rtl' : 'ltr' ?>" placeholder="States of USA"/>
               </div>
               <div class="form-text text-muted">
                Bloodhound offers advanced functionalities such as prefetching and backfilling with remote data.
               </div>
              </div>
             </div>
             <div class="form-group row">
              <label class="col-form-label text-right col-lg-3 col-sm-12">Prefetch</label>
              <div class="col-lg-4 col-md-9 col-sm-12">
               <div class="typeahead">
                <input class="form-control" id="kt_typeahead_3" type="text" dir="<?php echo isset( $_REQUEST['rtl'] ) && $_REQUEST['rtl'] ? 'rtl' : 'ltr' ?>" placeholder="Countries"/>
               </div>
               <div class="form-text text-muted">Prefetched data is fetched and processed on initialization</div>
              </div>
             </div>
             <div class="form-group row">
              <label class="col-form-label text-right col-lg-3 col-sm-12">Custom Templates</label>
              <div class="col-lg-4 col-md-9 col-sm-12">
               <div class="typeahead">
                <input class="form-control" id="kt_typeahead_4" type="text" dir="<?php echo isset( $_REQUEST['rtl'] ) && $_REQUEST['rtl'] ? 'rtl' : 'ltr' ?>" placeholder="Oscar winners"/>
               </div>
               <div class="form-text text-muted">Custom templates give you full control over how suggestions get rendered</div>
              </div>
             </div>
             <div class="form-group row">
              <label class="col-form-label text-right col-lg-3 col-sm-12">Multiple Datasets</label>
              <div class="col-lg-4 col-md-9 col-sm-12">
               <div class="typeahead">
                <input class="form-control" id="kt_typeahead_5" type="text" dir="<?php echo isset( $_REQUEST['rtl'] ) && $_REQUEST['rtl'] ? 'rtl' : 'ltr' ?>" placeholder="Select an option"/>
               </div>
               <div class="form-text text-muted">Remote data is only used when the data provided by local and prefetch is insufficient</div>
              </div>
             </div>
             <div class="form-group row">
              <label class="col-form-label text-right col-lg-3 col-sm-12">Modal Demos</label>
              <div class="col-lg-4 col-md-9 col-sm-12">
               <a href="" class="btn btn-light-primary font-weight-bold btn-sm" data-toggle="modal" data-target="#kt_typeahead_modal">Launch modal typeaheads</a>
              </div>
             </div>
            </div>
            <div class="card-footer">
             <div class="row">
              <div class="col-lg-9 ml-lg-auto">
               <button type="reset" class="btn btn-primary mr-2">Submit</button>
               <button type="reset" class="btn btn-secondary">Cancel</button>
              </div>
             </div>
            </div>
           </form>
           <!--end::Form-->
          </div>

          // Class definition
          var KTTypeahead = function() {
              var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
                  'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
                  'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
                  'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
                  'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
                  'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
                  'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
                  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
                  'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
              ];

              // Private functions
              var demo1 = function() {
                  var substringMatcher = function(strs) {
                      return function findMatches(q, cb) {
                          var matches, substringRegex;

                          // an array that will be populated with substring matches
                          matches = [];

                          // regex used to determine if a string contains the substring `q`
                          substrRegex = new RegExp(q, 'i');

                          // iterate through the pool of strings and for any string that
                          // contains the substring `q`, add it to the `matches` array
                          $.each(strs, function(i, str) {
                              if (substrRegex.test(str)) {
                                  matches.push(str);
                              }
                          });

                          cb(matches);
                      };
                  };

                  $('#kt_typeahead_1, #kt_typeahead_1_modal').typeahead({
                      hint: true,
                      highlight: true,
                      minLength: 1
                  }, {
                      name: 'states',
                      source: substringMatcher(states)
                  });
              }

              var demo2 = function() {
                  // constructs the suggestion engine
                  var bloodhound = new Bloodhound({
                      datumTokenizer: Bloodhound.tokenizers.whitespace,
                      queryTokenizer: Bloodhound.tokenizers.whitespace,
                      // `states` is an array of state names defined in "The Basics"
                      local: states
                  });

                  $('#kt_typeahead_2, #kt_typeahead_2_modal').typeahead({
                      hint: true,
                      highlight: true,
                      minLength: 1
                  }, {
                      name: 'states',
                      source: bloodhound
                  });
              }

              var demo3 = function() {
                  var countries = new Bloodhound({
                      datumTokenizer: Bloodhound.tokenizers.whitespace,
                      queryTokenizer: Bloodhound.tokenizers.whitespace,
                      // url points to a json file that contains an array of country names, see
                      // https://github.com/twitter/typeahead.js/blob/gh-pages/data/countries.json
                      prefetch: HOST_URL + '/api/?file=typeahead/countries.json'
                  });

                  // passing in `null` for the `options` arguments will result in the default
                  // options being used
                  $('#kt_typeahead_3, #kt_typeahead_3_modal').typeahead(null, {
                      name: 'countries',
                      source: countries
                  });
              }

              var demo4 = function() {
                  var bestPictures = new Bloodhound({
                      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
                      queryTokenizer: Bloodhound.tokenizers.whitespace,
                      prefetch: HOST_URL + '/api/?file=typeahead/movies.json'
                  });

                  $('#kt_typeahead_4').typeahead(null, {
                      name: 'best-pictures',
                      display: 'value',
                      source: bestPictures,
                      templates: {
                          empty: [
                              '<div class="empty-message" style="padding: 10px 15px; text-align: center;">',
                              'unable to find any Best Picture winners that match the current query',
                              '</div>'
                          ].join('
    '),
                          suggestion: Handlebars.compile('<div><strong>{{value}}</strong> – {{year}}</div>')
                      }
                  });
              }

              var demo5 = function() {
                  var nbaTeams = new Bloodhound({
                      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
                      queryTokenizer: Bloodhound.tokenizers.whitespace,
                      prefetch: HOST_URL + '/api/?file=typeahead/nba.json'
                  });

                  var nhlTeams = new Bloodhound({
                      datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
                      queryTokenizer: Bloodhound.tokenizers.whitespace,
                      prefetch: HOST_URL + '/api/?file=typeahead/nhl.json'
                  });

                  $('#kt_typeahead_5').typeahead({
                      highlight: true
                  }, {
                      name: 'nba-teams',
                      display: 'team',
                      source: nbaTeams,
                      templates: {
                          header: '<h3 class="league-name" style="padding: 5px 15px; font-size: 1.2rem; margin:0;">NBA Teams</h3>'
                      }
                  }, {
                      name: 'nhl-teams',
                      display: 'team',
                      source: nhlTeams,
                      templates: {
                          header: '<h3 class="league-name" style="padding: 5px 15px; font-size: 1.2rem; margin:0;">NHL Teams</h3>'
                      }
                  });
              }

              return {
                  // public functions
                  init: function() {
                      demo1();
                      demo2();
                      demo3();
                      demo4();
                      demo5();
                  }
              };
          }();

          jQuery(document).ready(function() {
              KTTypeahead.init();
          });

Basic Demo
Bloodhound (Suggestion Engine)
Bloodhound offers advanced functionalities such as prefetching and backfilling with remote data.
Prefetch
Prefetched data is fetched and processed on initialization
Custom Templates
Custom templates give you full control over how suggestions get rendered
Multiple Datasets
Remote data is only used when the data provided by local and prefetch is insufficient
Modal Demos
Launch modal typeaheads

##### Typeahead Examples

Basic Demo
Bloodhound
Bloodhound offers advanced functionalities such as prefetching and backfilling with remote data.
Prefetch
Prefetched data is fetched and processed on initialization

### Validation State Examples

           <div class="card card-custom">
            <div class="card-header">
             <h3 class="card-title">
              Validation State Examples
             </h3>
            </div>
            <!--begin::Form-->
            <form class="form">
             <div class="card-body">
              <div class="form-group row">
               <label class="col-form-label text-right col-lg-3 col-sm-12">Success State</label>
               <div class="col-lg-4 col-md-9 col-sm-12 is-valid">
                <div class="typeahead">
                 <input class="form-control is-valid" id="kt_typeahead_1_validate" dir="<?php echo isset( $_REQUEST['rtl'] ) && $_REQUEST['rtl'] ? 'rtl' : 'ltr' ?>" type="text" placeholder="States of USA"/>
                </div>
                <div class="valid-feedback">Success! You've done it.</div>
                <span class="form-text text-muted">Example help text that remains unchanged.</span>
               </div>
              </div>
              <div class="form-group row">
               <label class="col-form-label text-right col-lg-3 col-sm-12">Error State</label>
               <div class="col-lg-4 col-md-9 col-sm-12 is-invalid">
                <div class="typeahead">
                 <input class="form-control is-invalid" id="kt_typeahead_2_validate" dir="<?php echo isset( $_REQUEST['rtl'] ) && $_REQUEST['rtl'] ? 'rtl' : 'ltr' ?>" type="text" placeholder="States of USA"/>
                </div>
                <div class="invalid-feedback">Shucks, check the formatting of that and try again.</div>
                <span class="form-text text-muted">Example help text that remains unchanged.</span>
               </div>
              </div>
             </div>
             <div class="card-footer">
              <div class="row">
               <div class="col-lg-9 ml-lg-auto">
                <button type="reset" class="btn btn-primary mr-2">Submit</button>
                <button type="reset" class="btn btn-secondary">Cancel</button>
               </div>
              </div>
             </div>
            </form>
            <!--end::Form-->
           </div>

          // Class definition
          var KTTypeahead = function() {

              var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
                  'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
                  'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
                  'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
                  'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
                  'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
                  'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
                  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
                  'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
              ];

              // Private functions
              var demo1 = function() {
                  var substringMatcher = function(strs) {
                      return function findMatches(q, cb) {
                          var matches, substringRegex;

                          // an array that will be populated with substring matches
                          matches = [];

                          // regex used to determine if a string contains the substring `q`
                          substrRegex = new RegExp(q, 'i');

                          // iterate through the pool of strings and for any string that
                          // contains the substring `q`, add it to the `matches` array
                          $.each(strs, function(i, str) {
                              if (substrRegex.test(str)) {
                                  matches.push(str);
                              }
                          });

                          cb(matches);
                      };
                  };

                  $('#kt_typeahead_1_validate, #kt_typeahead_2_validate').typeahead({
                      hint: true,
                      highlight: true,
                      minLength: 1
                  }, {
                      name: 'states',
                      source: substringMatcher(states)
                  });
              }

              return {
                  // public functions
                  init: function() {
                      demo1();
                  }
              };
          }();

          jQuery(document).ready(function() {
              KTTypeahead.init();
          });

Success State
Success! You've done it.
Example help text that remains unchanged.
Error State
Shucks, check the formatting of that and try again.
Example help text that remains unchanged.

### User Profile 12 messages

James Jones
Application Developer
jm@softplus.com Sign Out
My Profile
Account settings and more update
My Messages
Inbox and tasks
My Activities
Logs and notifications
My Tasks
latest tasks and projects

##### Recent Notifications

Another purpose persuade Due in 2 Days
+28%
Would be to people Due in 2 Days
+50%
Purpose would be to persuade Due in 2 Days
-27%
The best product Due in 2 Days
+8%

#### Shopping Cart

iBlender The best kitchen gadget in 2020
$ 350 for 5
SmartCleaner Smart tool for cooking
$ 650 for 4
CameraMax Professional camera for edge cutting shots
$ 150 for 3
4D Printer Manufactoring unique objects
$ 1450 for 7
MotionWire Perfect animation tool
$ 650 for 7

##### System Messages

Top Authors Most Successful Fellas
+82$
Popular Authors Most Successful Fellas
+280$
New Users Most Successful Fellas
+4500$
Active Customers Most Successful Fellas
+4500$
Bestseller Theme Most Successful Fellas
+4500$

##### Notifications

Another purpose persuade Due in 2 Days
+28%
Would be to people Due in 2 Days
+50%
Purpose would be to persuade Due in 2 Days
-27%
The best product Due in 2 Days
+8%
5 new user generated report
Reports based on sales
2 new items submited
by Grog John
79 PSD files generated
Reports based on sales
$2900 worth producucts sold
Total 234 items
4.5h-avarage response time
Fostest is Barry
3 Defence alerts
40% less alerts thar last week
Avarage 4 blog posts per author
Most posted 12 time
16 authors joined last week
9 photodrapehrs, 7 designer
2 new items have been submited
by Grog John
2.8 GB-total downloads size
Mostly PSD end AL concepts
$2900 worth producucts sold
Total 234 items
7 new user generated report
Reports based on sales
4.5h-avarage response time
Fostest is Barry

##### Customer Care

Enable Notifications:
Enable Case Tracking:
Support Portal:

##### Reports

Generate Reports:
Enable Report Export:
Allow Data Collection:

##### Memebers

Enable Member singup:
Allow User Feedbacks:
Enable Customer Portal:
Matt Pears
Active
Matt Pears 2 Hours
How likely are you to recommend our company to your friends and family?
3 minutes You
Hey there, we’re just writing to let you know that you’ve been subscribed to a repository on GitHub.
Matt Pears 40 seconds
Ok, Understood!
Just now You
You’ll receive notifications for all issues, pull requests!
Matt Pears 40 seconds
You can unwatch this repository immediately by clicking here: https://github.com
Just now You
Discover what students who viewed Learn Figma - UI/UX Design. Essential Training also viewed
Matt Pears 40 seconds
Most purchased Business courses during this sale!
Just now You
Company BBQ to celebrate the last quater achievements and goals. Food and drinks provided

#### Select A Demo

##### Demo 1

Default RTL Version

##### Demo 2

Default RTL Version

##### Demo 3

Default RTL Version

##### Demo 4

Default RTL Version

##### Demo 5

Default RTL Version

##### Demo 6

Default RTL Version

##### Demo 7

Default RTL Version

##### Demo 8

Default RTL Version

##### Demo 9

Default RTL Version

##### Demo 10

Default RTL Version

##### Demo 11

Default RTL Version

##### Demo 12

Default RTL Version

##### Demo 13

Default RTL Version

##### Demo 14

Coming soon

##### Demo 15

Coming soon

##### Demo 16

Coming soon

##### Demo 17

Coming soon

##### Demo 18

Coming soon

##### Demo 19

Coming soon

##### Demo 20

Coming soon

##### Demo 21

Coming soon

##### Demo 22

Coming soon

##### Demo 23

Coming soon

##### Demo 24

Coming soon

##### Demo 25

Coming soon

##### Demo 26

Coming soon

##### Demo 27

Coming soon

##### Demo 28

Coming soon

##### Demo 29

Coming soon

##### Demo 30

Coming soon