Reputation: 53
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
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