From Datalist to Awesomplete

Temporal fix for apps using Datalist on Chrome/WebView with Android 8 or higher

by Génesis García Morilla

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.4/awesomplete.base.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.4/awesomplete.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.4/awesomplete.js"></script>
<input list="ice-cream-flavors">
<datalist id="ice-cream-flavors">
  <option value="Chocolate">
  <option value="Coconut">
  <option value="Mint">
  <option value="Strawberry">
  <option value="Vanilla">
  <option value="Lemon">
  <option value="Orange">
  <option value="Apple">
  <option value="Pineapple">
  <option value="Pizza">
</datalist>

CSS

.awesomplete {
  display: inline-flex;
}

.awesomplete > ul {
  top: 20px;
  max-height: 200px;
  overflow-y: auto;
}

.awesomplete > input::-webkit-calendar-picker-indicator {
  display: none;
}

JavaScript

document.querySelectorAll('input[list]').forEach($input => {
  const comboplete = new Awesomplete($input, {
    minChars: 0,
    maxItems: Infinity,
    sort: false
  });

  $input.insertAdjacentHTML('afterend', '<button class="dropdown-btn">▾</button>')

  $input.nextElementSibling.onclick = () => {
    if (comboplete.ul.childNodes.length === 0) {
      comboplete.minChars = 0
      comboplete.evaluate()
    } else if (comboplete.ul.hasAttribute('hidden')) comboplete.open()
    else comboplete.close()
  }

  $input.nextElementSibling.onblur = () => comboplete.close()
})