تکمیل خودکار

      //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>
      

      //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>
      

      //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>