Autocomplete with HTML Support

Inspect the full details and code of a selected snippet

<div class="uk-text-bold">Start typing "rot" or "bee".</div>
      <input class="uk-input" type="text" uk-autocomplete="minLength: 2;" placeholder="Type to search..." />
      <div class="uk-margin-top">
        <p>Please note that this code is intended to work with real API service to query results. Therefore you will see full list here.</p>
        <p>If you want to switch to real API, uncomment <code>await this.fetchData(query);</code>(line 54) from source and remove <code>this.fetchLocalData();</code> (line 55)</p>
        <div>Your API should return array of</div>
        <div><code>['value1', 'value2', 'value3']</code> or <code>[{ value: 'value1', html: 'html1' },{ value: 'value2', html: 'html2' },{ value: 'value3', html: 'html3' }]</code></div>
        <div>Then you can use it like that</div>
        <div><code>uk-autocomplete="url: /api/autocomplete; method: POST; minLength: 2;" placeholder="Type to search..."</code></div>
      </div>

</div>
  </div>
</div>

(function (UIkit) {
  if (!UIkit) {
    throw new Error('UIkit not found. Make sure UIkit is loaded before this plugin.');
  }

UIkit.component('autocomplete', {
    props: {
      url: String, // API URL for autocomplete suggestions
      minLength: Number, // Minimum characters before searching
      paramName: String, // Query parameter name
      method: String, // HTTP Method (GET/POST)
      key: String, // Optional: Extract values from an object using this key
      offset: Number, // Space between input and dropdown (default: 10px)
      minHeight: Number, // Minimum dropdown height (default: 100px)
      maxHeight: Number, // Maximum dropdown height (default: 300px)
      edgeSpacing: Number // Additional spacing from page edge (default: 10px)
    },

data() {
      return {
        url: window.location.href,
        minLength: 2,
        paramName: 'query',
        method: 'GET',
        key: '',
        offset: 0,
        minHeight: 100,
        maxHeight: 300,
        edgeSpacing: 50,
        items: [],
        isOpen: false,
        dropdown: null,
        inner: null
      };
    },

connected() {
      if (this.$el.tagName !== 'INPUT') return;
      this.$el.addEventListener('input', this.onInput.bind(this));
      this.$el.addEventListener('blur', () => setTimeout(this.hide.bind(this), 200));
    },

disconnected() {
      if (this.$el.tagName === 'INPUT') {
        this.$el.removeEventListener('input', this.onInput);
      }
      this.removeDropdown();
    },

methods: {
      async onInput() {
        const query = this.$el.value.trim();
        if (query.length >= this.minLength) {
          //await this.fetchData(query);
          this.fetchLocalData();
        } else {
          this.hide();
        }
      },

async fetchData(query) {
        if (!this.url) return;

const method = this.method.toUpperCase();
        const options = { method, headers: { 'Content-Type': 'application/json' } };
        let url = this.url;

if (method === 'GET') {
          url += `${url.includes('?') ? '&' : '?'}${encodeURIComponent(this.paramName)}=${encodeURIComponent(query)}`;
        } else {
          options.body = JSON.stringify({ [this.paramName]: query });
        }

try {
          const response = await fetch(url, options);
          if (!response.ok) throw new Error('Network response was not ok');
          const data = await response.json();

this.items = this.extractValues(data);
          this.items.length ? this.show() : this.hide();
        } catch (err) {
          console.error('Autocomplete fetch error:', err);
          this.hide();
        }
      },

async fetchLocalData() {
        try {
          const data = [
            {
              value: 'Blutrot',
              html: '<div class="uk-flex uk-flex-middle"><div class="uk-margin-small-right"><span class="uk-border-rounded" style="width: 16px; height: 16px; display: block; border: 1px solid #162036; background-color: #990000;"></span></div><div class="uk-flex-1">Blutrot</div><div class="uk-margin-small-right"><i class="fa-regular fa-palette"></i></div></div>'
            },
            {
              value: 'Dunkelrot',
              html: '<div class="uk-flex uk-flex-middle"><div class="uk-margin-small-right"><span class="uk-border-rounded" style="width: 16px; height: 16px; display: block; border: 1px solid #162036; background-color: #8B0000;"></span></div><div class="uk-flex-1">Dunkelrot</div><div class="uk-margin-small-right"><i class="fa-regular fa-palette"></i></div></div>'
            },
            {
              value: 'Hellrot',
              html: '<div class="uk-flex uk-flex-middle"><div class="uk-margin-small-right"><span class="uk-border-rounded" style="width: 16px; height: 16px; display: block; border: 1px solid #162036; background-color: #FF6666;"></span></div><div class="uk-flex-1">Hellrot</div><div class="uk-margin-small-right"><i class="fa-regular fa-palette"></i></div></div>'
            },
            {
              value: 'Himbeerrot',
              html: '<div class="uk-flex uk-flex-middle"><div class="uk-margin-small-right"><span class="uk-border-rounded" style="width: 16px; height: 16px; display: block; border: 1px solid #162036; background-color: #E30B5D;"></span></div><div class="uk-flex-1">Himbeerrot</div><div class="uk-margin-small-right"><i class="fa-regular fa-palette"></i></div></div>'
            },
            {
              value: 'Karmesinrot',
              html: '<div class="uk-flex uk-flex-middle"><div class="uk-margin-small-right"><span class="uk-border-rounded" style="width: 16px; height: 16px; display: block; border: 1px solid #162036; background-color: #DC143C;"></span></div><div class="uk-flex-1">Karmesinrot</div><div class="uk-margin-small-right"><i class="fa-regular fa-palette"></i></div></div>'
            },
            {
              value: 'Karminrot',
              html: '<div class="uk-flex uk-flex-middle"><div class="uk-margin-small-right"><span class="uk-border-rounded" style="width: 16px; height: 16px; display: block; border: 1px solid #162036; background-color: #D70040;"></span></div><div class="uk-flex-1">Karminrot</div><div class="uk-margin-small-right"><i class="fa-regular fa-palette"></i></div></div>'
            },
            {
              value: 'Korallenrot',
              html: '<div class="uk-flex uk-flex-middle"><div class="uk-margin-small-right"><span class="uk-border-rounded" style="width: 16px; height: 16px; display: block; border: 1px solid #162036; background-color: #FF7F50;"></span></div><div class="uk-flex-1">Korallenrot</div><div class="uk-margin-small-right"><i class="fa-regular fa-palette"></i></div></div>'
            },
            {
              value: 'Rot',
              html: '<div class="uk-flex uk-flex-middle"><div class="uk-margin-small-right"><span class="uk-border-rounded" style="width: 16px; height: 16px; display: block; border: 1px solid #162036; background-color: #FF0000;"></span></div><div class="uk-flex-1">Rot</div><div class="uk-margin-small-right"><i class="fa-regular fa-palette"></i></div></div>'
            },
            {
              value: 'Rubinrot',
              html: '<div class="uk-flex uk-flex-middle"><div class="uk-margin-small-right"><span class="uk-border-rounded" style="width: 16px; height: 16px; display: block; border: 1px solid #162036; background-color: #9B111E;"></span></div><div class="uk-flex-1">Rubinrot</div><div class="uk-margin-small-right"><i class="fa-regular fa-palette"></i></div></div>'
            },
            {
              value: 'Tomatenrot',
              html: '<div class="uk-flex uk-flex-middle"><div class="uk-margin-small-right"><span class="uk-border-rounded" style="width: 16px; height: 16px; display: block; border: 1px solid #162036; background-color: #FF6347;"></span></div><div class="uk-flex-1">Tomatenrot</div><div class="uk-margin-small-right"><i class="fa-regular fa-palette"></i></div></div>'
            },
            {
              value: 'Weinrot',
              html: '<div class="uk-flex uk-flex-middle"><div class="uk-margin-small-right"><span class="uk-border-rounded" style="width: 16px; height: 16px; display: block; border: 1px solid #162036; background-color: #722F37;"></span></div><div class="uk-flex-1">Weinrot</div><div class="uk-margin-small-right"><i class="fa-regular fa-palette"></i></div></div>'
            },
            {
              value: 'Ziegelrot',
              html: '<div class="uk-flex uk-flex-middle"><div class="uk-margin-small-right"><span class="uk-border-rounded" style="width: 16px; height: 16px; display: block; border: 1px solid #162036; background-color: #B22222;"></span></div><div class="uk-flex-1">Ziegelrot</div><div class="uk-margin-small-right"><i class="fa-regular fa-palette"></i></div></div>'
            }
          ];

extractValues(data) {
        if (Array.isArray(data)) return data;
        if (typeof data === 'object' && this.key && Array.isArray(data[this.key])) return data[this.key];
        return [];
      },

show() {
        if (!this.isOpen) {
          this.createDropdown();
          this.isOpen = true;
        }
        this.updateDropdown();
      },

hide() {
        if (this.isOpen) {
          this.removeDropdown();
          this.isOpen = false;
        }
      },

createDropdown() {
        this.removeDropdown();

this.dropdown = document.createElement('div');
        this.dropdown.className = 'uk-autocomplete';
        Object.assign(this.dropdown.style, {
          position: 'absolute',
          zIndex: '960'
        });

this.inner = document.createElement('div');
        this.inner.className = 'uk-autocomplete-inner';
        Object.assign(this.inner.style, {
          overflowY: 'auto',
          maxHeight: `${this.maxHeight}px`
        });

this.dropdown.appendChild(this.inner);
        document.body.appendChild(this.dropdown);

this.inner.addEventListener('mousedown', (e) => {
          e.preventDefault();
          let li = e.target.closest('li');
          if (li) {
            this.$el.value = li.dataset.value;
            this.hide();
          }
        });

window.addEventListener('scroll', this.positionDropdown, { passive: true });
        window.addEventListener('resize', this.positionDropdown, { passive: true });

this.positionDropdown();
      },

updateDropdown() {
        if (!this.inner) return;
        this.inner.innerHTML = this.items.length ? `<ul class="uk-list">${this.renderListItems()}</ul>` : '';
        this.positionDropdown();
      },

removeDropdown() {
        if (this.dropdown?.parentNode) {
          this.dropdown.parentNode.removeChild(this.dropdown);
        }
        this.dropdown = this.inner = null;
        window.removeEventListener('scroll', this.positionDropdown);
        window.removeEventListener('resize', this.positionDropdown);
      },

positionDropdown() {
        if (!this.dropdown) return;

const rect = this.$el.getBoundingClientRect();
        const offset = this.offset;
        const minH = this.minHeight;
        const maxH = this.maxHeight;
        const edge = this.edgeSpacing;

const availableBelow = window.innerHeight - (rect.bottom + offset + edge);
        const availableAbove = rect.top - (offset + edge);
        let dropdownOnTop = availableBelow < minH && availableAbove >= minH;
        let innerMaxHeight = dropdownOnTop ? Math.min(maxH, availableAbove) : Math.min(maxH, availableBelow);

this.inner.style.maxHeight = `${Math.max(innerMaxHeight, minH)}px`;
        this.dropdown.style.top = dropdownOnTop ? `${window.scrollY + rect.top - this.dropdown.offsetHeight + 1 - offset}px` : `${window.scrollY + rect.bottom + offset}px`;

Object.assign(this.dropdown.style, {
          left: `${window.scrollX + rect.left}px`,
          width: `${rect.width}px`
        });

this.dropdown.classList.toggle('uk-autocomplete-top', dropdownOnTop);
        this.dropdown.classList.toggle('uk-autocomplete-bottom', !dropdownOnTop);
      },

renderListItems() {
        const query = this.$el.value.trim().toLowerCase();
        return this.items
          .map((item) => {
            if (typeof item === 'object') {
              const highlighted = item.value.replace(new RegExp(`(${query})`, 'gi'), `<span class="uk-autocomplete-highlight">$1</span>`);
              return `<li data-value="${item.value}">${item.html.replace(item.value, highlighted)}</li>`;
            } else {
              const highlighted = item.replace(new RegExp(`(${query})`, 'gi'), `<span class="uk-autocomplete-highlight">$1</span>`);
              return `<li data-value="${item}">${highlighted}</li>`;
            }
          })
          .join('');
      }
    }
  });
})(window.UIkit);

Information

Detailed overview of a selected code snippet

yaneony

261

20.03.2025, 02:26:33

28.03.2025, 11:01:09

uk-autocomplete, uk-border, uk-card, uk-container, uk-flex, uk-input, uk-list, uk-margin, uk-padding, uk-text

Comments

Browse user feedback and discussions in detail

Currently in development and will be available soon. Stay tuned for updates!