<auto-complete>

back edit

This demo uses static HTML responses so the results are not filtered.

<auto-complete src="../../support/accounts" for="results" class="position-relative">
  <label for="account">Account</label>
  <input class="mt-1 form-control width-full" type="text" id="account" autocomplete="off" autofocus required>
  <ul class="autocomplete-results" id="results"></ul>
</auto-complete>

See /demo/support/accounts for suggestion markup example. Use data-autocomplete-value to specify values to complete, or it'd default to using textContent.

<li role="option" class="autocomplete-item" data-autocomplete-value="github">
  <img src="https://github.com/github.png" width="20" class="avatar mr-1" alt="">
  GitHub Inc. <span class="text-normal">@github</span>
</li>
<li role="option" class="autocomplete-item" data-autocomplete-value="hubot">
  <img src="https://github.com/hubot.png" width="20" class="avatar mr-1" alt="">
  Hubot <span class="text-normal">@hubot</span>
</li>
<li role="option" class="autocomplete-item" data-autocomplete-value="octocat">
  <img src="https://github.com/octocat.png" width="20" class="avatar mr-1" alt="">
  Monalisa Octocat <span class="text-normal">@octocat</span>
</li>