JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/ractive"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.min.js"></script>
<script id="autocomplete" type="text/ractive"> 
  <div>
    <input value="{{search}}" placeholder="Start typing..." />
    {{#if suggestions}}
    <ul>
    	{{#suggestions}}
      	{{#result}}<li>{{.}}</li>{{/result}}
      {{/suggestions}}
    </ul>
    {{/if}}
  </div>
</script>

<div id="app"></div>

CSS

ul {
  margin: 0;
  padding: 0;
  border: 1px solid #aaa;
}

ul li {
  list-style-type: none;
  background: #fff;
  padding: 5px 15px;
}

ul li:hover {
  color: #fff;
  background: #1C90F3;
  cursor: pointer
}

JavaScript

const Autocomplete = Ractive.extend({
	template: '#autocomplete',
	data: {
    	search: '',
      suggestions: []
  }
});

new Ractive({
	el: '#app',
  template: `
    <h1>Selected location: {{ location }} </h1>
  	<Autocomplete search="{{location}}" suggestions="{{locations}}" />
  `,
  data: {
  	location: '',
    locations: []
  },
  observe: {
  	location: function (val) {
      this.set('locations', val.length >= 3 ? Promise.resolve(['111', '222', '333']) : []);
    }
  },
  components: {
  	Autocomplete
  },
  adapt: ['promise-alt']
});