JSFiddle - React, Tailwind, and code Playground

by Darren Jennings

HTML

<script src="https://unpkg.com/[email protected]/dist/vue-autosuggest.js"></script>
<div id="app">
<span v-html="query"></span>
  <pre v-if="selected">You have selected: '{{selected}}'</pre>
  <vue-autosuggest
    v-model="query"
    v-on:selected="onSelected"
    :suggestions="filteredSuggestions" 
    :input-props="inputProps">
  </vue-autosuggest>
</div>

CSS

:root {
  --theme-color: white;
  --theme-header: #8F73BD;
  --theme-bg: #21222C;
  --theme-item_color_highlighted: #80D4E7;
  --theme-item_bg_highlighted: #363948;
}

body {
  background-color: var(--theme-bg);
  color: var(--theme-color);
  max-width: 800px;
  padding: 20px;
  margin-left: auto !important;
  margin-right: auto !important;
  font-family: monospace;
}

button {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  background: var(--theme-bg);
  color: var(--theme-color);
  text-transform: uppercase;
  font-weight: 700;
  font-size: .66rem;
  white-space: nowrap;
  border: 3px solid var(--theme-color);
  border-radius: 2rem;
  padding: .2rem .85rem .25rem .85rem;
  cursor: pointer;
}

h1 {
  color: var(--theme-header);
}

* {
  transition: height 0.200s linear;
  transition: border-color linear 0.1s;
}

#autosuggest__input {
  background-color: var(--theme-bg);
  caret-color: #ddd;
  color: var(--theme-color);
  position: relative;
  display: block;
  font-family: monospace;
  font-size: 20px;
  border: 1px solid #616161;
  border-radius: 3px;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

#autosuggest__input.autosuggest__input--open,
#autosuggest__input:hover {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border: 1px solid lightgray;
}

.autosuggest__results-container {
  position: relative;
  width: 100%;
  background-color: var(--theme-bg);
}

.autosuggest__results {
  background-color: var(--theme-bg);
  font-weight: 300;
  margin: 0;
  position: absolute;
  z-index: 10000001;
  width: 100%;
  border: 1px solid #e0e0e0;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  padding: 0px;
  overflow: scroll;
  max-height: 400px;
}

.autosuggest__results ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
  background-color: var(--theme-bg);
}

.autosuggest__results .autosuggest__results-item {
  cursor: pointer;
 ...

JavaScript

// Initialize a new vue component on the index.html document
// mounted to the element with the id="app"
// everything inside <div id="app">...</div> becomes vue-ified 
new Vue({
  data() {
    return {
      query: '',
      selected: '',
      suggestions: [{
        data: ['Frodo', 'Samwise', 'Gandalf', 'Galadriel', 'Faramir', 'Éowyn', 'Peregrine Took', 'Boromir', 'Legolas', 'Gimli', 'Gollum', 'Beren', 'Saruman', 'Sauron', 'Théoden']
      }],
      inputProps: {
        id: "autosuggest__input",
        placeholder: "Hello Louisville, type 'G'"
      },
      limit: 10
    };
  },
  
  computed: {
  	filteredSuggestions () {
    	return [{ data: this.suggestions[0].data.filter(item => {
        return item.toLowerCase().indexOf(this.query.toLowerCase()) > -1;
      }) }];
    }
 	},
  
  methods: {
    onSelected(option) {
      this.selected = option.item;
    }
  }
}).$mount('#app')