VUE INSTANT

vue instant allows you to easily create custom search controls with auto suggestions for your vue 2 application.

Installation

npm install --save vue-instant

Distribution import

JavaScript

import 'vue-instant/dist/vue-instant.css'
import VueInstant from 'vue-instant/dist/vue-instant.common'
Vue.use(VueInstant)

Browser support


                    <script src="vue.js">


                    <script src="vue-instant/dist/vue-instant.browser.js">

Example Fiddle

try typing a film

[]

Styles

You can create your own style in this external page!

Attributes

Attribute	Description	type	Required	Default	Accepted values
v-model	binding the component value.	String	true	-	-
suggestions	collection of suggestions that appear while the user is typing	Array	true	-	-
suggestion-attribute	The attribute name of the object to render in the searchbox	string	true	-	-
type	The style of the input	String	false	facebook	['google', 'facebook', 'twitter', 'amazon', 'spotify', 'custom']
show-autocomplete	only show suggests, or suggests with autocomplete.	Boolean	true	full	-
placeholder	same as placeholder in native input	String	false	write something...	-
name	same as name in native input	String	false	vueInstant	-
autofocus	same as autofocus in native input	Boolean	true	false	-
disabled	same as disabled in native input	Boolean	false	false	-

Events

Event	Description	Event Data
@input	triggers when the value changes	(value: string)
@click-input	triggers when the text input is clicked	(event: Event)
@click-button	triggers when the submit button is clicked	(value: string)
@selected	triggers when the selectedObject changes	(selected: obj)
@enter	triggers when the enter key is pressed	(selected: obj)
@key-up	triggers when the arrowup key is pressed	(selected: obj)
@key-down	triggers when the arrowdown key is pressed	(selected: obj)
@key-right	triggers when the arrowright key is pressed	(selected: obj)
@clear	triggers when the clear button is pressed	-
@escape	triggers when the escape key is pressed	(event: Event)

Custom Box

You can override the styles and customize the searchbox. It's easy.

1. You need define the type prop with the 'custom' value

2. The next step is go to http://shipow.github.io/searchbox/ and generate your own style or create your own inspired in shipow code.

3. Copy the css generated in your css file.

4. Create a new css class called .sbx-custom__input-placeholder with the same properties of the class called ".sbx-custom__input".

5. Add this class in your css with your autocomplete background and your autocomplete color.

CSS

.vue-instant__suggestions li.highlighted__custom {
  background-color: "your decision";
  color: "your decision";
}
.vue-instant__suggestions {
  margin-top: "your decision";
}

Star Fork Follow @santiblanko Download Issue Watch