inp-v-search

Live

Installation

npm i vue-input-search

Default import

Install all the components:

import 'vue-input-search/dist/vue-search.css'
import VueSearch from 'vue-input-search/dist/vue-search.common'

const app = new Vue({
    el: '#app',
    components:{
        'vue-search':VueSearch
    }
}

<vue-search 
    :img-photo="'path-img'" 
    @newitem="newitem()" 
    @itemselected="itemselected($event)" 
    :source-field="'name'" 
    :show-new-botton="true"
    :search-by-field="false"
    :api-source="'https://url-data-source'"
    ></vue-search>

Settings

Option | Type | Default | Description ------ | ---- | ------- | ----------- placeholder | String | '' | Placeholder text showNewBotton | Boolean | true | Show or not the new bottom isRequired | Boolean | false | is required enableClassBase | Boolean | true | Show or not 'content-input' searchByField | Boolean | true | Enable find by field name of datasource txtNotFound | String | 'No one found with that name' | Text when there is no data txtBtnNew | String | 'Create A New Element' | Text of new button inputClass | Object | {} | Custom class css {'form-control':true} model | String | '' | Model imgPhoto | String | '' | Image of circle list element ApiSource | String | '' | Acces point API SourceField | String | 'name' | If searchByField is true use this