AutoCompleteFor - load saved data and set value from other AutoComplete control

[Bernard Jurlina]

Hello!

I have two problems. First, how can I get the AutoComplete displays text from the value if I open some saved data form the database? For example, this is the control

<div class="form-group">

<a rel='nofollow' href="#" onclick="otvoriStranku('UgovarateljStrankaId');" class="control-label" title="Otvori podatke odabranog ugovaratelja">Ugovaratelj <span style="font-size:small;">(osiguranik, kontakt i korisnik se postavljaju prema ugovaratelju)</span></a>

<div class="input-group mb-3" style="flex-wrap:nowrap;">

<ejs-autocomplete id="UgovarateljStrankaId" ejs-for="Polica.UgovarateljStrankaId" autofill="true"

  cssClass="combo-required" change="onStrankaChange" enableVirtualization="true" beforeOpen="onStrankaBeforeOpen" popupHeight="250px">

<e-data-manager adaptor="UrlAdaptor" url="/DataSets/DsPolicaStrankaNovo"></e-data-manager>

<e-autocomplete-fields text="PrezimeIme" value="StrankaId"></e-autocomplete-fields>

</ejs-autocomplete>

<div class="input-group-append" style="height:37px;">

<button class="btn btn-info" type="button" onclick="novaStranka();" id="btnUgo" title="Otvori unos nove stranke u novom prozoru">...</button>

</div>

</div>

<span asp-validation-for="Polica.UgovarateljStrankaId" class="text-danger"></span>

</div>

and when I open the page with saved data, it shows only StrankaId, not the PrezimeIme text.

Second, how can I set value from one autocompletefor to second autocompletefor when I select the value on the first? Again, it shows me only the StrankaId on the second, not the PrezimeIme. The second is this

<div class="form-group">

<a rel='nofollow' href="#" onclick="otvoriStranku('OsiguranikStrankaId');" class="control-label" title="Otvori podatke odabranog osiguranika">Osiguranik</a>

<div class="input-group mb-3" style="flex-wrap:nowrap;">

<ejs-autocomplete id="OsiguranikStrankaId" ejs-for="Polica.OsiguranikStrankaId" autofill="true" filterType="StartsWith" filtering="onStrankaFiltering"

  cssClass="combo" change="onStrankaChange" enableVirtualization="true" beforeOpen="onStrankaBeforeOpen" popupHeight="250px">

<e-data-manager adaptor="UrlAdaptor" url="/DataSets/DsPolicaStrankaNovo"></e-data-manager>

<e-autocomplete-fields text="PrezimeIme" value="StrankaId"></e-autocomplete-fields>

</ejs-autocomplete>

<div class="input-group-append" style="height:37px;">

<button class="btn btn-info" type="button" onclick="novaStranka();" id="btnOsi" title="Otvori unos nove stranke kontakta u novom prozoru">...</button>

</div>

</div>

<span asp-validation-for="Polica.OsiguranikStrankaId" class="text-danger"></span>

</div>

Thanks!

[Priyanka Karthikeyan]

Hi Bernard Jurlina,

Thank you for reaching out to us.

We would like to kindly inform you that the AutoComplete component primarily works based on the value field. In order to retrieve and display the corresponding text (e.g., PrezimeIme) for a selected value (e.g., StrankaId), you can access it using the args.itemData object within the change event. Here's an example:

 

 

 change: function(args) {

            console.log(args.itemData['text'])

        }

 

Additionally If you'd like to set the selected value from one AutoComplete component to another (e.g., when a user selects an item in the first dropdown), and have the second one display the corresponding text as well, You can achieve it by using cascading AutoComplete.  we’ve included a cascading sample below, which demonstrates how to populate one AutoComplete based on the selection from another:

 

 

 

<div class='control-wrapper'> 

  <div class="padding-top"> 

    <ejs-autocomplete id="department" placeholder="Select a country"  dataSource="@ViewBag.department" change="countrychange" showPopupButton="true"> 

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

    </ejs-autocomplete> 

  </div> 

  <div class="padding-top"> 

    <ejs-autocomplete id="user" enabled="false" placeholder="Select a state" dataSource="@ViewBag.user" showPopupButton="true"> 

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

    </ejs-autocomplete> 

  </div> 

</div> 

<script type="text/javascript"> 

  function countrychange() { 

    var countryObj = document.getElementById('department').ej2_instances[0]; 

    var state = document.getElementById('user').ej2_instances[0]; 

    state.enabled = true; 

    var tempQuery = new ej.data.Query().where('DepartmentName', 'equal', countryObj.value); 

    state.query = tempQuery; 

    state.text = null; 

    state.dataBind(); 

  } 

</script> 

 

Regards,

Priyanka K

Attachment: WebApplication11494128527_655a6772.zip