Autocomplete custom value binding issue

[Nur]

Hi i want to make my "ejs-autocomplete" search in my country list just like in the basic example shows , but

I want to search on country and want to bind the "CountryCode" or "Code" whatever that list provide as Id

if i change the value to "CountryCode" in this line, problem is when i type "india"

it search on the "CountryCode" field not in the "Name" field. 

<e-autocomplete-fields text="Name" value="CountryCode"></e-autocomplete-fields>

what is the solution for this, please let me know if i am not clear on my end. by the way i am using ODataV4Adaptor

[Berly Christopher]

Hi Nur, 

  

Greetings from Syncfusion support.  

  

We can change the field name dynamically in the component by taking the instance and provide the required search field in the text and value property in the field setting. Kindly refer the below code example. 

  

Here, initially AutoComplete will display the result based on the “FirstName” field related values and after changing the filed, then AutoComplete component will display the result based on “City” field values. 

  

    <div class='control-wrapper'> 

        <div style='padding-top:75px;'> 

            <ejs-autocomplete id="customers" query="new ej.data.Query().from('Employees').select(['FirstName', 'City', 'EmployeeID']).take(6).requiresCount()" placeholder="Select a customer" popupHeight="200px"> 

                <e-autocomplete-fields value="FirstName"></e-autocomplete-fields> 

                <e-data-manager url="https://services.odata.org/V4/Northwind/Northwind.svc/" adaptor="ODataV4Adaptor" crossDomain="true"></e-data-manager> 

            </ejs-autocomplete> 

        </div> 

        <input type="button" id="button" value="click to chnage field" /> 

    </div> 

<script> 

    document.getElementById("button").addEventListener("click", function () { 

        var autoObj = document.getElementById("customers"); 

        autoObj.ej2_instances[0].fields.value = "City"; 

        autoObj.ej2_instances[0].fields.text = "City"; 

        autoObj.ej2_instances[0].dataBind(); 

    }) 

</script> 

  

Please find the sample from the below link. 

Sample Link: https://www.syncfusion.com/downloads/support/forum/154694/ze/AutoComplete_Odata_154694-24406475  

  

Else, you can perform this by using filtering event. Here, we have selected the “FirstName” and “City” field from the defined data source. We can filter the value both in the field “FirstName” and “LastName” by changing the query conjunction as “AND” instead of “OR” like below.  

  

    <div class='control-wrapper'> 

        <div style='padding-top:75px;'> 

            <ejs-autocomplete id="customers" filtering="onFltering" query="new ej.data.Query().from('Employees').select(['FirstName', 'City', 'EmployeeID']).take(6).requiresCount()" placeholder="Select a customer" popupHeight="200px"> 

                <e-autocomplete-fields value="FirstName"></e-autocomplete-fields> 

                <e-data-manager url="https://services.odata.org/V4/Northwind/Northwind.svc/" adaptor="ODataV4Adaptor" crossDomain="true"></e-data-manager> 

            </ejs-autocomplete> 

        </div> 

    </div> 

<script> 

    function onFltering(e) { 

        var query = new ej.data.Query().from('Employees').select(['FirstName', 'City']).take(6).requiresCount(); 

        var predicateQuery = query.where(new ej.data.Predicate('FirstName', 'contains', e.text, true).and('City', 'contains', e.text, true)); 

        query = (e.text !== '') ? predicateQuery : query; 

        e.updateData(this.dataSource, query);   

    } 

</script> 

  

To know more about this, please refer the below knowledge base link. 

KB Link: https://www.syncfusion.com/kb/10158/why-autocomplete-does-not-filter-using-text-field 

  

Regards, 

Berly B.C 

[Akshit]

I have to different both text and value.

 var autoObj = document.getElementById("ddlitemgroup");

                    autoObj.ej2_instances[0].fields.value = data;

                    autoObj.ej2_instances[0].fields.text = txtshortname;

                    autoObj.ej2_instances[0].dataBind();


but bind both same.

pFA

Attachment: image_(5)_284e1976.zip

[Dineshkumar Arumugam]

Hi Akshit ! 

 

We have validated your query and we have prepared sample to update different text and value fields while we update the custom value, please use the below code snippet to acheive your requirement. 

 

[index.cshtml] 

 

<ejs-autocomplete id="City" 

                    placeholder="Choose countries" floatLabelType="Auto" allowCustom="true" popupHeight="450px" filtering="itemgroup" actionComplete="actionComplete" 

                    noRecordsTemplate="@Html.Raw("<div>" 

                +"<div id=\"nodata\"> No matched item, do you want to add it as new item in list?</div>" 

                + "<button id=\"btn\" class=\"e-control e-btn\">Add New Record</button></div>")"> 

    <e-data-manager adaptor="UrlAdaptor" url="/Home/UrlDatasource" crossDomain="true"></e-data-manager> 

    <e-autocomplete-fields text="ShipCountry" value="ShipName"></e-autocomplete-fields> 

</ejs-autocomplete> 

 

<script>  

    var newItem; 

    function actionComplete(e) { 

        if (newItem) { 

            e.result.push(newItem); 

        } 

    } 

    function itemgroup(e) { 

        var country = document.getElementById('City').ej2_instances[0]; 

        setTimeout(() => { 

        if (document.getElementById('nodata')) { 

            document.getElementById('btn').onclick = function () { 

                //onclick event for button 

                var customText = (document.getElementById('City')).value; 

                var customValue = customText + "_Value"; 

                newItem = { 'ShipCountry': customText, 'ShipName': customValue }; 

                country.hidePopup(); 

                country.addItem(newItem); 

                country.value = customValue; 

            }; 

            } 

        }, 100); 

    } 

</script> 

 

 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/AutoComplete2098885283 

 

Please get back to us, if you need any further assistance. 

 

Regards, 

Dineshkumar A. 

[Akshit]

i want like this.

document.getElementById("button").addEventListener("click", function () {

var autoObj = document.getElementById("customers");

autoObj.ej2_instances[0].fields.value = "1";

autoObj.ej2_instances[0].fields.text = "City";

autoObj.ej2_instances[0].dataBind();

})

but this code not working.

how to set default value and text ? 

[Ponmani Murugaiyan]

Hi Akshit, 

The code “autoObj.ej2_instances[0].fields.value” is used to dynamically change the name of value/text field as like below code snippet. So, as per your code snippet will not update the value. 

<ejs-autocomplete id="customers" query="new ej.data.Query().from('Employees').select(['FirstName', 'City', 'EmployeeID']).take(6).requiresCount()" placeholder="Select a customer" popupHeight="200px">  

       <e-autocomplete-fields value="FirstName"></e-autocomplete-fields>  

       <e-data-manager url=https://services.odata.org/V4/Northwind/Northwind.svc/ adaptor="ODataV4Adaptor" crossDomain="true"></e-data-manager>  

</ejs-autocomplete>  

<script>  

autoObj.ej2_instances[0].fields.value = "Country";  

autoObj.ej2_instances[0].fields.text = "City";  

</script>  

In order to set the value to component, you can update using the value property through component instance. Also AutoComplete supports only the value field you need to update the value property with FirstName as like below code snippet. 

<script>  

    document.getElementById("button").addEventListener("click", function () {  

        var autoObj = document.getElementById("customers");  

        autoObj.value = ‘Andrew’; 

        autoObj.ej2_instances[0].dataBind();  

    })  

</script>  

Regards, 

Ponmani M