JSFiddle - React, Tailwind, and code Playground

by Darren Jennings

HTML

<script src="https://unpkg.com/[email protected]/dist/index.js"></script>
<div id="app">
  <pre>{{ selected }}</pre>
  <vue-autosuggest :suggestions="filteredOptions" :result-item-key="'firstname'" :input-props="inputProps" :section-configs="sectionConfigs" />
</div>

CSS

body {
  max-width: 500px;
  width: 500px;
  padding: 20px;
  margin-left: auto!important;
  margin-right: auto!important;
  font-family: monospace;
  background-color: #f2f2f2;
}

#autosuggest__input {
  position: relative;
  display: block;
  font-family: monospace;
  font-size: 20px;
  border: 1px solid #616161;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

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

.autosuggest__results-container {
  position: relative;
  width: 100%;
}

.autosuggest__results {
  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;
  background: white;
  padding: 0px;
  list-style: none;
}

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

.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

Vue.use(window.VueAutosuggest.default);

new Vue({
  data() {
      return {
        selected: "",
        limit: 10,
        options: [{
          "data": [
            "clifford kits",
            "friendly chemistry",
            "phonics",
            "life of fred",
            "life of fred math",
            "magic school bus",
            "math mammoth light blue",
            "handwriting",
            "math",
            "minecraft",
            "free worksheets",
            "4th grade",
            "snap circuits",
            "bath toys",
            "channies",
            "fred",
            "lego",
            "math life of fred",
            "multiplication",
            "thinking tree"
          ]
        }],
        sectionConfigs: {
          "default": {
            limit: 15,
            onSelected: function(item) {
              alert('default: ' + item.label)
            }
          },
          "url": {
            limit: 2,
            onSelected: function(item) {
              alert('url: ' + item.item.url);
            }
          }
        },
        filteredOptions: [],
        inputProps: {
          id: "autosuggest__input",
          initialValue: "",
          onClick: () => {},
          onInputChange: this.onInputChange,
          placeholder: "Type 'G'"
        }
      };
    },
    methods: {
      onInputChange(text) {
        this.filteredOptions = [{
          data: this.options[0].data.filter(
            item => {
              return item.toLowerCase().indexOf(text.toLowerCase()) > -1
            })
        }];
      }
    }
}).$mount('#app')