Suggestions from your server

<form class="demo" onsubmit="event.preventDefault()">
  <div class="demo-field">
    <label class="demo-label" for="people">People <span class="demo-hint">· type two letters</span></label>
    <input id="people" name="people">
  </div>
  <p class="demo-out" id="out">No one chosen</p>
</form>

import { createCombobox } from 'https://www.devix.pk/cdn/oss/combobox@1.0.0/index.js';

const PEOPLE = [
  { value: 'aisha', label: 'Aisha Khan', description: 'aisha@example.com' },
  { value: 'bilal', label: 'Bilal Ahmed', description: 'bilal@example.com' },
  { value: 'chen', label: 'Chen Wei', description: 'chen@example.com' },
  { value: 'dana', label: 'Dana Ali', description: 'dana@example.com' },
  { value: 'omar', label: 'Omar Farooq', description: 'omar@example.com' },
];

const out = document.getElementById('out');
createCombobox(document.getElementById('people'), {
  name: 'people',
  minChars: 2,
  placeholder: 'Search people, or type a name',
  // Stands in for your API.
  load: (query, { signal }) =>
    new Promise((resolve, reject) => {
      const timer = setTimeout(() => resolve(PEOPLE.filter((person) => person.label.toLowerCase().includes(query.toLowerCase()))), 350);
      signal.addEventListener('abort', () => {
        clearTimeout(timer);
        reject(new DOMException('cancelled', 'AbortError'));
      });
    }),
  onChange: (values) => (out.textContent = values.length ? `${values.length} chosen: ${values.join(', ')}` : 'No one chosen'),
});

@import url('https://www.devix.pk/cdn/oss/combobox@1.0.0/select.min.css');