[Vue.js] Component that performs suggestion / auto save (autocomplete)

Introduction

In Vue.js, I created an input component that displays a suggestion list, such as a leading search engine. It's published on npm, so please use it if you like.

What function

It is a text box component of Vue.js that has a function to suggest suggestions (automatic storage) if you enter characters halfway into the text box. You can often find it on search engine sites etc.

Simple sample

Anyway, it is sample code. This is a simple example of displaying an array specified by data () in a suggestion list.

<template>
  <div>
    <vue-suggest-input :items="items" />
  </div>
</template>
<script>
import VueSuggestInput from 'vue-suggest-input'
import 'vue-suggest-input/dist/vue-suggest-input.css'

export default {
  components: {
    VueSuggestInput
  },
  data () {
    return {
      items: ['apple', 'cocoa', 'coffee', 'cola']
    }
  }
}
</script>
`` `

In actual operation, I think that the contents to be displayed in the suggestion list from the outside will be loaded by the REST API etc, but the method will be described later.

## Installation

It can be installed with npm.

npm i vue-suggest-input --save

## Keyboard shortcut

Shortcut keys can be used to display a suggestion list or to move or select a list.

### When the suggestion list is hidden

| Key | Description |
|:-|:-|
Up arrow (↑), down arrow (↓) | Display suggestion list |
Raises the `search` event. |

### When the suggestion list is displayed

| Key | Description |
|:-|:-|
| Escape (ESC) | Close the suggestion list. |
Up arrow (↑) | Moves the candidate selection up. |
Down arrow (↓) | Moves the candidate selection down. |
| Enter | Sets the candidate selected in the suggestion list in the input area and raises the `search` event. |

## Property (Props)

### items

** Type: ** Array or Function or Promise
** Default value: ** null
#### Overview

Specify an array of content to be displayed in the suggestion. Specify an array, function, or promise type. When specifying with a function or promise, the return value from the function must be an array.

-Example of specifying by array

```html
<vue-suggest-input: items = "['item1', 'item2']" />

-Example of specifying promise

<suggest-input: items = "getItems" />

export default {
  methods: {
    async getItems () {
      const {data} = await this. $ axios.get ("url")
      return data
    }
  }
}

filter-func

** Type: ** Function ** Default value: ** null

Overview

You can specify a custom function to filter the content of the suggestion. The custom function is passed two arguments. The first argument is the content of the suggestion to be filtered, and the second is the content of the input area.

Custom functions should return a return value of type bool. If true is returned, the suggestion of the first argument is displayed as a candidate. It will not be displayed if you return false.

The sample code below is designed to display only suggestions that contain the 11 string in the suggestion in the list of candidates.

<suggest-input
  : item = "['item011', 'item012', 'item111']"
  : filter-func = "myFilter" />

export default {
  methods: {
    myFilter (suggestItem, inputValue) {
      return suggestItem.indexOf ("11")> = 0
    }
  }
}

max-suggest

** Type: ** Number ** Default value: ** 10

Overview

Specifies the maximum number of suggestions to display.

<suggest-input: max-suggest = "5" />

query-interval

** Type: ** Number ** Default value: ** 100

Overview

Sets the interval in milliseconds for re-searching the suggestion list. For example, if 1000 is specified, search for suggestions is performed from the array or function specified in the items property in a one-second fashion.

Conversely, if you want to search for a candidate immediately after each input, specify 0.

<suggest-input: query-interval = "1000" />

loading-show-delay

** Type: ** Number ** Default value: ** 500

Overview

While searching for a suggestion, specify the time in milliseconds until displaying "Loading ...". For example, if 500 is specified, if reading for the suggestion takes more than 500 ms," Reading ... "will be displayed below the input field.

This property is useful when it takes time to search for a suggestion.

Event

search

This is an event that occurs when you select a candidate from the suggestion list or confirm your input with the Enter key. It is mainly used when the main search processing is performed based on the search condition entered in this component.

<suggest-input @ search = "doSearch ()" />

input

It is an event that occurs at each input. This is equivalent to the inpput event of HTMLElement.

<suggest-input @ input = "doInput ()" />

Customize Icon

You can replace the icon on the right of the input area with your own icon. By default, a magnifying glass SVG icon is displayed, as shown in the image below.

Use the slot to customize the icon. The following is sample code.

<vue-suggest-input>
  <div slot = "add-on-icon">
    <i class = "fa fa-rocket" aria-hidden = "true"> </ i>
  </ div>
</ vue-suggest-input>

In the case of the code above, the icon replaces the one specified in slot as in the following image.

finally

If you have a bug, please let me know in the comments.