### Select Language

### Activity

- Team
- Projects
- Schedule

Joshua S. Las Vegas, NV
Melany W. San Jose, CA
Esteban C. Miami, FL
Tara S. New York, NY
The slicer project getslicer.io
31%
5 / 24
Metamovies reworked metamovies.co
84%
28 / 31
Fast Pizza redesign fastpizza.com
60%
25 / 39

Call Danny at Colby's

Today - 11:30am

Meeting with Alice

Today - 01:00pm

Answer Annie's message

Today - 01:45pm

Send new campaign

Today - 02:30pm

Project review

Today - 03:30pm

Call Trisha Jackson

Today - 05:00pm

Write proposal for Don

Today - 06:00pm

#### Recently viewed

Browser Support Blog post
Twitch API Blog post
Twitter Auth Blog post

#### Recent Members

Alice C. Software Engineer
Tara S. UI/UX Designer
Jimmy H. Project Manager

- Components Hub
- Avatars
- Accordions
  - Accordion
  - Collapse
  - Image Accordion
- Breadcrumb
- Calendar
- Dropdown
- Icon Box
- Loader
- Message
- Modal
- Progress
- Tabs
  - Regular Tabs
  - Slider Tabs
- Flex Table
  - Base Table
  - Compact Table
  - Media Table
  - Advanced Table
- Snacks
- Plugins
  - Alertify
  - Autocomplete
  - Datepicker
  - ChoicesJs
  - NoUI Slider
  - Filepond
  - Light Gallery
  - Video Gallery
  - Video Player
  - Toasts
  - WebUI Popover
- Rich Text
  - Summernote
  - Sun Editor

# Autocomplete

### Simple Autocomplete

Huro is integrated with EasyAutocomplete, a nice jQuery automplete library. You can check the plugin documentation on Github. You can also access the javascript code by visiting the `assets/js/components.js` file. The following shows how it works with a simple result template.

          //JS CODE
          var demoSimpleOptions = {
              url: "assets/data/user.json",
              getValue: "name",
              template: {
                  type: "custom",
                  method: function (value, item) {
                      return `
                          <div class="template-wrapper">
                              <div class="entry-text">
                                  <span>${value}</span>
                              </div>
                          </div>
                      `
                  }
              },
              highlightPhrase: false,
              list: {
                  maxNumberOfElements: 5,
                  showAnimation: {
                      type: "fade", //normal|slide|fade
                      time: 400,
                      callback: function () { }
                  },
                  match: {
                      enabled: true
                  },
                  onChooseEvent: function () {
                      //do your stuff here
                  }
              },
          };

          $("#autocomplete-demo-simple").easyAutocomplete(demoSimpleOptions);

          //MARKUP
          <div class="field is-autocomplete">
              <div class="control has-icon">
                  <input id="autocomplete-demo-simple" type="text" class="input" placeholder="Search people...">
                  <div class="form-icon">
                      <i data-feather="search"></i>
                  </div>
              </div>
          </div>

### Subtext Autocomplete

Huro is integrated with EasyAutocomplete, a nice jQuery automplete library. You can check the plugin documentation on Github. You can also access the javascript code by visiting the `assets/js/components.js` file. The following shows how it works with a subtitle result template.

          //JS CODE
          var demoSubtextOptions = {
              url: "assets/data/user.json",
              getValue: "name",
              template: {
                  type: "custom",
                  method: function (value, item) {
                      return `
                          <div class="template-wrapper">
                              <div class="entry-text">
                                  <span>${value}</span>
                                  <span>${item.location}</span>
                              </div>
                          </div>
                      `
                  }
              },
              highlightPhrase: false,
              list: {
                  maxNumberOfElements: 5,
                  showAnimation: {
                      type: "fade", //normal|slide|fade
                      time: 400,
                      callback: function () { }
                  },
                  match: {
                      enabled: true
                  },
                  onChooseEvent: function () {
                      //do your stuff here
                  }
              },
          };

          $("#autocomplete-demo-subtext").easyAutocomplete(demoSubtextOptions);

          //MARKUP
          <div class="field is-autocomplete">
              <div class="control has-icon">
                  <input id="autocomplete-demo-subtext" type="text" class="input" placeholder="Search people...">
                  <div class="form-icon">
                      <i data-feather="search"></i>
                  </div>
              </div>
          </div>

### Advanced Autocomplete

Huro is integrated with EasyAutocomplete, a nice jQuery automplete library. You can check the plugin documentation on Github. You can also access the javascript code by visiting the `assets/js/components.js` file. The following shows how it works with an advanced result template.

          //JS CODE
          var demoAdvancedOptions = {
              url: "assets/data/user.json",
              getValue: "name",
              template: {
                  type: "custom",
                  method: function (value, item) {
                      return `
                          <div class="template-wrapper">
                              <div class="avatar-wrapper">
                                  <img class="autocpl-avatar" src="${item.pic}">
                                  <img class="avatar-badge" src="${item.badge}">
                              </div>
                              <div class="entry-text">
                                  <span>${value}</span>
                                  <span>${item.location}</span>
                              </div>
                          </div>
                      `
                  }
              },
              highlightPhrase: false,
              list: {
                  maxNumberOfElements: 5,
                  showAnimation: {
                      type: "fade", //normal|slide|fade
                      time: 400,
                      callback: function () { }
                  },
                  match: {
                      enabled: true
                  },
                  onChooseEvent: function () {
                      //do your stuff here
                  }
              },
          };

          $("#autocomplete-demo-advanced").easyAutocomplete(demoAdvancedOptions);

          //MARKUP
          <div class="field is-autocomplete">
              <div class="control has-icon">
                  <input id="autocomplete-demo-advanced" type="text" class="input" placeholder="Search people...">
                  <div class="form-icon">
                      <i data-feather="search"></i>
                  </div>
              </div>
          </div>