vue-generic-autocomplete/README.md

Vue addres search autocomplete and suggestion

 Vue Generic Autocomplete component

## Props
If you wish to use other frameworks to customize the component, you can add boostrap classes to the input and icons to the suggestions list, .eg Font Awesome
```js
 <template>
    <autocomplete
        @searchword="autocomplete"
        :list="list"
        :icons="'fas fa-map-marker-alt'"
        :classes="'form-control'"
    />
</template>
```

**Required**
| Name | Type  |  Default  | Description|
| - | - | - | - |- |
| **1. list** | Array | -  | Array of data to auto complete from |   

**Optional**

| Name | Type | Default | 
|- | - | - | - |
| **2. clases** | String |  ```-```   |  
| **3. icons** | String |  ```-```   |      
| **4. placeholder** | String | null |   
| **5. suggestionsLimit** | Number | 4 | 



## Events
- **onFocus**
    - Fires whenever the input is focued, emits the focus event.
- **searchword**
    - **payload**: The text on the auto complete input
    You can the make a call to your api / or resource that you want the suggestions
    ```js
    <template>
        <autocomplete
            @searchword="autocomplete"
            :list="list"
        />
    </template>

    export default {
        data(){
            return {
                list : []
            };
        },
        methods: {
            autocomplete(searchText){
                // only call the resource when search text length is greater that 2 
                if (searchText.length > 2) {
                    fetch(`http://autocomplete.travelpayouts.com/places2?term=${searchText}&locale=en&types[]=country&callba0ck`)
                    .then(response => response.json())
                    .then(data => {
                        this.list = data;
                    })
                    // eslint-disable-next-line
                    .catch(error => console.error(error));
                }else{
                    this.list = [];
                }
            }
        }
    }
    ```
- **on-chosen**
    - The chosen item selected on the sugges list  
    - ***payload*** : the chosen item