@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. |

Slots

label

Label value for input element.

prepend

Div block before input element, use it to display an icon

append

Div block after input element, use it to display an icon

loading

What to display while loading, if loading prop is true

tag

How a tag should look

item

How a dropdown item should look

no-results

Text to display if nothing if there are no results

after-list

Use this to display some more information after the dropdown with results

Development

npm run serve

or

yarn serve