vue-uikit-autocomplete

A small set of Vue 2.x input components adjusted for Uikit

Links

• Demo
• Vuikit

Currently it consists of 3 components:

• VkInput
• VkAutocomplete
• VkAutocompleteHttp

They are built as UMD modules, so you can use them in any way you want.

Directly in an HTML page (they will be available as global variables by their names):

<script type="text/javascript" src="http://cdn.rawgit.com/sunabozu/vue-uikit-autocomplete/master/dist/vue.min.js/VkInput.js"></script>
<script type="text/javascript" src="http://cdn.rawgit.com/sunabozu/vue-uikit-autocomplete/master/dist/vue.min.js/VkAutocomplete.js"></script>
<script type="text/javascript" src="http://cdn.rawgit.com/sunabozu/vue-uikit-autocomplete/master/dist/vue.min.js/VkAutocompleteHttp.js"></script>

Or by installing...

npm i vue-uikit-autocomplete --save

...and then importing them:

import VkInput from 'vue-uikit-autocomplete/dist/VkInput'
import VkAutocomplete from 'vue-uikit-autocomplete/dist/VkAutocomplete'
import VkAutocompleteHttp from 'vue-uikit-autocomplete/dist/VkAutocompleteHttp'

VkInput

A simple input field

Property | Values | Description -------- | ------ | ----------- type | text, number etc. | Just a regular type attribute for input element placeholder | any text | A regular placeholder icon | see icons | One of the supported icons color | danger or sucess | Makes the border red or green disabled | true or false | Disables or enables the input size | large or small | General size of the component wide | large, medium, small or mini | Width of the component flip-icon | true or false | Should the icon be animated?

Event | Description ----- | ----------- input | A standard input event, just not native

VkAutocomplete

An input field with autocompletion. Based on VkInput, generates all of it events, and accepts all of it properties. You just have to provide an array of objects, and it will automatically search for matches and display only proper items. It uses text field for matching by default, but you can change it using field property. You can also provide a custom delegate to display the results in a way you want to (see Demo)

Property | Values | Description -------- | ------ | ----------- items | Array | An array of objects such as [{ text: 'something'}] field | String | A name of the field in the items objects you want to view and match delegate | Object | A Vue component you want to use instead of the standard delegate

Event | Description ----- | ----------- select | When user hits Enter; passes the selected object as an argument

VkAutocompleteHttp

A variation of VkAutocomplete that fetches suggestions from the network. Generates all of it events and accepts all of the properties of the previous two (except for items). You have to provide a URL of your data source and a filter function that processes the fetched list of objects and returns a proper array.

Property | Values | Description -------- | ------ | ----------- url | http://... | A URL of your data source http-headers | Array | Array of key-value pairs with the headers you want to pass during the request debounce | Number | An interval between the network calls (ms) filter | Function | Accepts a raw array and returns a proper array

Event | Description ----- | ----------- error | Returns an error if something wrong happened during fetching