@odyzeo/form-autocomplete NPM

@odyzeo/form-autocomplete

Simple autocomplete Vue.js component with ability to select multiple options, keyboard usage, and multiple options to choose from.

Installation

npm

npm install --save @odyzeo/form-autocomplete

yarn

yarn add @odyzeo/form-autocomplete

Import component in your where you want to use it and register it:

import 'FormAutocomplete' from 'form-autocomplete';
export default {
  components: {
    FormAutocomplete,
  },
}

Import styles or make your own.

import 'form-autocomplete/dist/form-autocomplete.css';

Usage

<template>
  <h1>Autocomplete - single</h1>
  <form-autocomplete
    :limit-max-height="false"
    :loading="isSearchLoading"
    :option-key="'name'"
    :options="filteredItems"
    :placeholder="'Type to search'"
    :clear-on-select="false"
    @search-change="search"
    @selected="openLink($event)"
  >
    <template
      #label
    >
      Participants
    </template>
          
    <template #item="{ item }">
      {{ item.name }}
    </template>
    
    <template #no-results>
      Participants not found
    </template>
    
    <template #loading>
      ...loading...
    </template>
    
    <template #after-list>
      <a
        v-if="linkToAllResults"
        :href="linkToAllResults.link"
        class="form-item__dropdown-item"
      >
        <div class="search-item__more">
          <span class="search-item__more-link">
            {{ linkToAllResults.text }}
          </span>
        </div>
      </a>
    </template>  
  </form-autocomplete>

  <h1>Autocomplete - tags</h1>
  
  <form-autocomplete
    v-model="selectedTagItems"
    :placeholder="'Type to search'"
    :options="filteredItems"
    :option-key="'name'"
    :loading="isSearchLoading"
    :close-on-select="false"
    :clear-on-select="false"
    confirm-tag-removal
    tags
    select-first
    @search-change="search"
  >
    <template
      #label
    >
      Participants
    </template>
          
    <template #tag="{ item }">
      {{ item.name }}
    </template>
        
    <template #item="{ item }">
      {{ item.name }}
    </template>
    
    <template #no-results>
      Participants not found
    </template>
    
    <template #loading>
      ...loading...
    </template>
  </form-autocomplete>
</template>

<script>
import FormAutocomplete from 'form-autocomplete'

export default {
  name: 'App',
  components: {
    FormAutocomplete,
  },
  data() {
    return {
      selectedItems: [],
      selectedTagItems: [
        { name: 'Zombi' },
      ],
      items: [
        { name: 'Denton' },
        { name: 'Pe4k' },
        { name: 'PaDi' },
        { name: 'Zoli' },
        { name: 'Zombi' },
      ],
      filteredItems: [],
      isSearchLoading: false,
      minSearchLength: 3,
    };
  },
  methods: {
    openLink(item) {
        if (typeof item === 'string') {
          if (query.length < this.minSearchLength || query === '') {
              this.isSearchLoading = false;
        
              return;
          }
        
          window.location = `/#${item}`;
          // Generate search page with returned query
          
          return;
        }
        
        window.location = item.url;
    },
    search(query) {    
        this.isSearchLoading = true;
        
        if (query.length < this.minSearchLength || query === '') {
            return;
        }
        
        this.startSearching(query);
    },
    startSearching(query) {
        this.filteredItems = this.items.filter(item =>
        item.name.toLowerCase()
          .includes(query.toLowerCase()));
        this.isSearchLoading = false;
    },
  },
};
</script>

Events

Search-change

Returns input given

Selected

Returns input given or array of items selected

Props

Property name	Type	Default value	Description
`data`	array	`[]`	Array of all options, if provided - will show results on empty input as all provided data. Will show duplicates if `duplicates` prop is set to true
`options`	array	`[]`	Array of options to display, these should be influenced by outer search methods for example.
`optionHeight`	number	`38`	Single option height
`optionKey`	string	`name`	Name of the object key to get value displayed in dropdown
`value or v-model`	array	`[]`	Array of initial selected option(s)
`selectFirst`	boolean	`false`	Whether to auto select first value from dropdown options
`tags`	boolean	`false`	Whether to select multiple options - tags
`confirmTagRemoval`	boolean	`false`	Whether there should be a visualised confirmation when removing tags with keyboard
`duplicates`	boolean	`false`	Hide selected values from dropdown options, ensure no duplicates can be chosen
`maxHeight`	number	`190`	Dropdown options max height
`limitMaxHeight`	boolean	`true`	If results dropdown should have max-height, set to false if you limit amout of your results in your backend/api
`placeholder`	string		Input `placeholer` attribute
`loading`	boolean	`false`	Show loading indicator
`disabled`	boolean	`false`	Set disabled input
`clearOnSelect`	boolean	`true`	Clear input on select
`closeOnSelect`	boolean	`true`	Hide dropdown on select
`formErrors`	array	`[]`	Array of errors to display
`transitionName`	string	`fade`	Name of css transition class
`debounce`	number	`0`	Enable debounce for search update by setting a value (other than 0)
`showOnFocus`	boolean	`false`	Show dropdown on focus. No need to type anything.