JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

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

CSS

body {
      max-width: 800px;
      padding: 20px;
      margin-left: auto !important;
      margin-right: auto !important;
      font-family: monospace;
    }
    
    #autosuggest__input {
      outline: none;
      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.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;
      overflow: scroll;
      max-height: 200px;
    }
    
    .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_title {
      color: gray;
      font-size: 11px;
      margin-left: 0;
      padding: 15px 13px 5px;
      border-top: 1px solid lightgray;
    }
    
    .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

new Vue({
  data() {
      return {
        selected: '',
        options: [{
        data: [
          'Frodo','Samwise', 'Gandalf', 'Galadriel', 'Faramir', 'Éowyn', 'Peregrine Took', 				           'Boromir', 'Legolas', 'Gimli', 'Gollum', 'Beren', 'Saruman', 'Sauron', 'Théoden']
        }],
        posts : [
      {
        title: 'post_ab',
        category_array: [
          {
            id: 1,
            slug: 'category - a'
          }, {
            id: 2,
            slug: 'category - b'
          }
        ]
      }, {
        title: 'post_ac',
        category_array: [
          {
            id: 1,
            slug: 'category - a'
          }, {
            id: 3,
            slug: 'category - c'
          }
        ]
      }, {
        title: 'post_bc',
        category_array: [
          {
            id: 2,
            slug: 'category - b'
          }, {
            id: 3,
            slug: 'category - c'
          }
        ]
      }
    ],
        filteredOptions: [],
        inputProps: {
          id: "autosuggest__input",
          onInputChange: this.onInputChange,
          placeholder: "Type 'e'"
        },
        limit: 10
      };
    },
    methods: {
      onSelected(option) {
          this.selected = option.item.title;
      },
      onInputChange(text) {
        if (text === '' || text === undefined) {
          return;
        }
        
        /* Full control over filtering. Maybe fetch from API?! Up to you!!! */
        /*if (this.filterTitle) {
      	posts = posts.filter((p) => {
        	return p.title.indexOf(this.filterTitle) !== -1
        })
        }*/
        const filteredData = this.posts.filter(item => {
          return item.title.toLowerCase().indexOf(text.toLowerCase()) > -1;
        }).slice(0, this.limit);
        
        this.filteredOptions = [{
          data: filteredData
        }];
      }
    }
}).$mount('#app')