Automatically selected value in the autocomplete

[Lajos Djerfi]

Hi,

I would like to achieve something with the autocomplete control, but I have some issues and I would kindly ask for your help.

When I want to choose a value, and that value is not in the data source of the autocomplete, I have made the functionality to add new value, and after I add new value for it to be selected in the control.

At the moment, I can save the value in the source, but I still have to manually select that value in the autocomplete.

This is my component with the autocomplete:

<template>

    <div>

        <div>

            <div id="Modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">

                <div class="modal-dialog modal-lg">

                    <div class="modal-content">

                        <div class="modal-header" style="display: block; float: right; padding: 5px 15px 0 0; border-bottom: none;">

                            <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="font-size: 2.5em" :title="$t('Zatvori')"><span aria-hidden="true">×</span></button>

                        </div>

                        <div class="modal-body">

                            <div>

                                <TemplatePerson ref="person"></TemplatePerson>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        </div>

        <form id="form_contract" v-on:submit.prevent="onSubmit" class="row">

            <div class="col-md-12">

                <div class="form-group row">

                    <!-- Dodati label u resurse -->

                    <label class="control-label col-md-2 text-right">Person</label>

                    <div class="col-md-8">

                        <ejs-autocomplete id="PERSON"

                                            class="form-control obavezno"

                                            :dataSource='PERSON_data'

                                            :fields='PERSON_fields'

                                            v-model="data.PERSON">

                        </ejs-autocomplete>

                    </div>

                    <div class="col-md-2 feedback m-t-5">

                        <button type="button" class="btn btn-outline-info btn-xs btn-circle" @click="openModal" :data-tooltip="$t('Add Person')" tabindex="-1"><i class="fa fa-plus"></i></button>

                    </div>

                </div>

            </div>

            <div class="col-md-12">

                <div class="form-group row">

                    <div class="col-md-2">

                    </div>

                    <div class="col-md-8">

                        <button type="submit" class="btn btn-primary btn-md pull-right m-b-15 waves-effect">Save</button>

                    </div>

                    <div class="col-md-2">

                    </div>

                </div>

            </div>

        </form>

    </div>

</template>

<script>

    import Vue from 'vue';

    import { AutoCompletePlugin } from "@syncfusion/ej2-vue-dropdowns";

    import { Query, DataManager, UrlAdaptor } from '@syncfusion/ej2-data';

    import TemplatePerson from './template.vue';

    Vue.use(AutoCompletePlugin);

    export default {

        name: 'ContractGeneral',

        components: {

            TemplatePerson

        },

        data: function () {

            return {

                data: {

                    PERSON: '',

                },

                PERSON_data: new DataManager({

                    url: '/api/persons/personsOnCase',

                    crossDomain: true,

                    adaptor: new UrlAdaptor,

                    requestType: 'json',

                }),

                PERSON_fields: { text: 'value', value: 'id' },

            }

        },

        methods: {

            openModal: function () {

                this.$refs.person.data.FIRST_NAME = '';

                this.$refs.person.data.LAST_NAME = '';

                if (this.data.PERSON) {

                    if (this.data.PERSON.split(" ").length - 1 == 1) {

                        var data = this.data.PERSON.split(' ');

                        this.$refs.person.data.FIRST_NAME = data[0];

                        this.$refs.person.data.LAST_NAME = data[1];

                    }

                    else {

                        this.$refs.person.data.FIRST_NAME = this.data.PERSON;

                    }                    

                }

                $("#Modal").modal("show");

            },

            onSubmit: function () {

                console.log(this.data);

            }

        }

    }

</script>

<style>

    @import "../../node_modules/@syncfusion/ej2-vue-dropdowns/styles/bootstrap.css";

</style>

[Lajos Djerfi]

And this is the template component for adding the value:

<template>

    <div>

        <form id="form_persons" v-on:submit.prevent="onSubmit">

            <div class="row">

                <div class="col-md-12">

                    <div class="form-group row">

                        <label class="control-label col-md-2 text-right">First Name</label>

                        <div class="col-md-8">

                            <ejs-maskedtextbox id="FIRST_NAME"

                                               class="form-control"

                                               v-model="data.FIRST_NAME">

                            </ejs-maskedtextbox>

                        </div>

                        <div class="col-md-2">

                        </div>

                    </div>

                </div>

                <div class="col-md-12">

                    <div class="form-group row">

                        <label class="control-label col-md-2 text-right">Last Name</label>

                        <div class="col-md-8">

                            <ejs-maskedtextbox id="LAST_NAME"

                                               class="form-control"

                                               v-model="data.LAST_NAME">

                            </ejs-maskedtextbox>

                        </div>

                    </div>

                    <div class="col-md-2"></div>

                </div>

                <div class="col-md-12">

                    <div class="form-group row">

                        <label class="control-label col-md-2 text-right">Birth Date</label>

                        <div class="col-md-8">

                            <ejs-datepicker id="BIRTH_DATE"

                                            class="form-control date mask-date"

                                            format="dd.MM.yyyy"

                                            v-model="data.BIRTH_DATE">

                            </ejs-datepicker>

                        </div>

                    </div>

                    <div class="col-md-2"></div>

                </div>

                <div class="col-md-12">

                    <div class="form-group row">

                        <div class="col-md-2">

                        </div>

                        <div class="col-md-8">

                            <button type="submit" class="btn btn-primary btn-md pull-right m-b-15 waves-effect">

                                Save

                            </button>

                        </div>

                        <div class="col-md-2">

                        </div>

                    </div>

                </div>

            </div>

        </form>

    </div>

</template>

<script>

    import Vue from "vue";

    import axios from 'axios';

    import { MaskedTextBoxPlugin } from "@syncfusion/ej2-vue-inputs";

    import { DatePickerPlugin } from "@syncfusion/ej2-vue-calendars";

    Vue.use(MaskedTextBoxPlugin);

    Vue.use(DatePickerPlugin);

    export default Vue.extend({

        name: 'PersonInfo',

        data: function () {

            return {

                data: {

                    FIRST_NAME: '',

                    LAST_NAME: '',

                },

            }

        },

        methods: {

            onSubmit: function () {

                axios.post('/api/persons/saveEditPerson', this.data)

                    .then(data => {

                        $("#Modal").modal("hide");

                        this.$parent.data.PERSON = this.data.FIRST_NAME;

                        document.getElementById('PERSON').ej2_instances[0].showPopup();

                    });

            }

        },

    });

</script>

<style>

    @import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/bootstrap.css";

    @import "../../node_modules/@syncfusion/ej2-vue-calendars/styles/bootstrap.css";

</style>

[Karthikeyan Viswanathan]

Hi Lajos, 

Thanks for contacting Syncfusion support. 

We checked your shared code. By default, the autocomplete doesn’t support a text property. It only supports value property.  

Please refer the UG documentation link: https://ej2.syncfusion.com/vue/documentation/auto-complete/data-binding.html  

Refer the below details: 

Fields	Type	Description
value	number or string	Specifies the hidden data value mapped to each list item that should contain a unique value.
groupBy	string	Specifies the category under which the list item has to be grouped.
iconCss	string	Specifies the icon class of each list item

API reference link: https://ej2.syncfusion.com/vue/documentation/auto-complete/api-autoCompleteComponent.html  

 So, you can select the value using the value property. Also, you can use the addItem public method to add a new item to the existing list. kindly refer to the following code. 

Refer the below code example: 

         let obj =  document.getElementById('PERSON').ej2_instances[0]; 

         obj.addItem({ProductName: "New Item"}); 

         obj.value = "New Item"; 

 

Refer the sample: http://www.syncfusion.com/downloads/support/forum/139746/ze/vue-2140640739 

Regards, 

Karthikeyan V.