JSFiddle - React, Tailwind, and code Playground

by Darren Jennings

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css">
<script src="https://unpkg.com/[email protected]/dist/index.js"></script>
<div id="app" class="font-mono relative">
<div class="pt-2 flex flex-wrap m-auto">
    <br/><br/>
    <div class="relative m-2 w-1/2">
      <vue-autosuggest :suggestions="filteredOptions" :on-selected="onSelected" :limit="10" :input-props="inputProps"></vue-autosuggest>
      <div class="absolute pin-r pin-t mt-3 mr-4 text-purple-lighter">
        <svg version="1.1" class="h-4 text-dark" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 52.966 52.966" style="enable-background:new 0 0 52.966 52.966;" xml:space="preserve">
          <path d="M51.704,51.273L36.845,35.82c3.79-3.801,6.138-9.041,6.138-14.82c0-11.58-9.42-21-21-21s-21,9.42-21,21s9.42,21,21,21
        c5.083,0,9.748-1.817,13.384-4.832l14.895,15.491c0.196,0.205,0.458,0.307,0.721,0.307c0.25,0,0.499-0.093,0.693-0.279
        C52.074,52.304,52.086,51.671,51.704,51.273z M21.983,40c-10.477,0-19-8.523-19-19s8.523-19,19-19s19,8.523,19,19
        S32.459,40,21.983,40z"></path>
        </svg>
      </div>
    </div>
        <pre class="p-4" v-if="selected">You have selected: '{{selected}}'</pre>
  </div>
</div>

CSS

#autosuggest__input {
  outline: none;
}

#autosuggest__input.autosuggest__input-open {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.autosuggest__results {
  margin: 0;
  position: absolute;
  z-index: 10000001;
  width: 100%;
  border: 1px solid #e0e0e0;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  background: white;
  padding: 0px;
}

.autosuggest__results ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.autosuggest__results .autosuggest__results_item {
  cursor: pointer;
  padding: 15px;
}

#autosuggest ul:nth-child(1) > .autosuggest__results_title {
  border-top: none;
}

.autosuggest__results .autosuggest__results_item:active,
.autosuggest__results .autosuggest__results_item:hover,
.autosuggest__results .autosuggest__results_item:focus,
.autosuggest__results .autosuggest__results_item.autosuggest__results_item-highlighted {
  background-color: #ddd;
}

JavaScript

var app = new Vue({
  data() {
      return {
        selected: '',
        options: [{
          data: ['Frodo', 'Samwise', 'Gandalf', 'Galadriel', 'Faramir', 'Éowyn', 'Peregrine Took', 'Boromir', 'Legolas', 'Gimli', 'Gollum', 'Beren', 'Saruman', 'Sauron', 'Théoden', 'Aragorn']
        }],
        filteredOptions: [],
        inputProps: {
          id: "autosuggest__input",
          onInputChange: this.onInputChange,
          placeholder: "Search for LOTR Characters...",
          class: 'bg-purple-white shadow w-full rounded border-0 p-3'
        },
        limit: 15
      };
    },
    methods: {
	      onSelected(option) {
          if(option){
	          this.selected = option.item;
          }
        },
        onInputChange(text) {
          if (text === '' || text === undefined) {
            this.filteredOptions = [];
            return;
          }

          /* Full control over filtering. Maybe fetch from API?! Up to you!!! */
          const filteredData = this.options[0].data.filter(item => {
            return item.toLowerCase().indexOf(text.toLowerCase()) > -1;
          }).slice(0, this.limit);

          this.filteredOptions = [{
            data: filteredData
          }];
        }
    }
});

app.$mount('#app')