vue-uikit-autocomplete v0.0.3
vue-uikit-autocomplete
Links
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 |