CODEWITHSUNDEEP
jquerykendo-uiautocomplete
Jacek
Jacek

Reputation: 53

Kendo AutoComplete set selected object programmatically

In auto-complete selected element is an object "user". When filling the form, I would like to set the object in auto-complete as the selected one in a way, that $("#" + controlId).data("kendoAutoComplete").dataItem() would return selected object.

$("#" + controlId).data("kendoAutoComplete").value("test") is setting only what is displayed but not the object behind.

Here is the definition:

$("#" + controlId).kendoAutoComplete({
    minLength: minLength,
    enforceMinLength: true,
    dataTextField: "Calculated",
    filter: "contains",
    template: '<span class="k-state-default"><p>#: data.FirstName # #: data.LastName # - #: data.Login #</p><p>#: data.Email #</p></span>',
    dataSource: {
      type: "json",
      serverFiltering: true,
      transport: {
        read: serviceUrl,
        parameterMap: function (data, type) {
          return { filter: $("#" + controlId).val() };
        }
      },
      schema: {
        parse: function (response) {
          var length = response.length;
          var dataItem;
          var idx = 0;

          for (; idx < length; idx++) {
            dataItem = response[idx];
            dataItem.Calculated = dataItem.FirstName + " " + dataItem.LastName;
          }
          return response;
        }
      }
    },
    filtering: function (e) {
      if (!e.filter.value) {
        e.preventDefault();
      }
    }
});

Upvotes: 2

Views: 4203

Answers (1)

SehaxX
SehaxX

Reputation: 764

So as far as I understand your issue, you want to select an existing object in the list and use it afterwards.

A solution would be this example below:

HTML:

  <input id="autocomplete" />
  <button onclick="addIt()">Add me</button>
  <button onclick="getIt()">Test me</button>

Init autocomplete:

$("#autocomplete").kendoAutoComplete({
  dataSource: [
    { name: "Dzeko", nat: "Bosnia" },
    { name: "Ronaldo", nat: "Portugal" },
    { name: "Messi", nat: "Argentina" },
    { name: "Muller", nat: "Germany" },
    { name: "Mbappe", nat: "France" }
  ],
  dataTextField: "name"
});

Select and get selected user:

  var user = {name: "Dzeko", nat: "Bosnia" };

  var autocomplete = $("#autocomplete").data("kendoAutoComplete");

  function addIt(){
    autocomplete.search(user.name);
    autocomplete.select(autocomplete.ul.children().eq(0));
    autocomplete.trigger("change");
    autocomplete.close();
  }

  function getIt(){    
    console.log(autocomplete.dataItem());
  }

This way you will get the user object in console.log

Also a working dojo: https://dojo.telerik.com/@sehaxx/OpIvOBOY Hope this helps you.

Upvotes: 3

Related Questions