Sorry if this question is completely silly, as JavaScript is not my stronger point. I use the autocompleter to fetch cities stored in my database. What I show is the name of the city, however what I want to get when I submit my form is the id of the city, not the name. Therefore, each request returns a JSON answer with the name and the id, and I use dataTextField: "name" so that the autocompleter extracts the name. However, in some of your example (like this one : http://demos.kendoui.com/autocomplete/remotedatasource.html) you are using DataValueField, so I thought that DataValueField: "id" would work. However it doesn't. Furthermore, it appears that DataValueField is not in the documentation of available options fields (http://demos.kendoui.com/autocomplete/remotedatasource.html).
14 Answers, 1 is accepted
The autocomplete UI widget persists only the selected text. Actually the you can post only the content of the input element. This is the expected behavior. As to the demos, the "dataValueField" is left by mistake and we will fix that for the next release of KendoUI.
In order to achieve your goal, you will need to use dropdownlist or combobox, which persist the selected id.
Georgi Krustev
the Telerik team
Rank 1
Thanks for your answer. It nearly works using a combo box, however it appears that the change event is not triggered whenever the text changed but when the value change (it's strange because on your example it works). I have a long list of cities in my database, so if I enter "Paris", an event is thrown, but if I delete Paris and type "Marseille", no change event is thrown... Is this normal ?
The change event is raised when the value of the combobox UI widget changes. From the given information I believe that this behavior is not normal and expected. I will suggest you send us a simple test page which replicates the issue. Thus I will be able to investigate it locally and advice you further.
Georgi Krustev
the Telerik team
Rank 1
Here is a sample page (please tell me once you have seen it) : --
Try to type "Paris". Several French cities will appear. Then delete and type "Marseille". No more cities will appear. I can check using Safari Developer tools that Ajax requests are only sent :
- the first time the box get focus.
- when I select an element in the list.
Probably, you have removed the link to the sample page. In order to reproduce this issue I have created a test page in jsFiddle. Please check it and let me know if I am missing something. Please note that currectly end user cannot enter custom value which is part of the selected item. This is a known issue, which will be fixed for the next release of the KendoUI.
Georgi Krustev
the Telerik team
Rank 1
Yes, I have removed the link, sorry but I don't really want the site to be indexed by Google as it is a work in progress project.
Okey, I understand. I didn't set the "filter" setting (what a silly mistake...). When I set it to "contains", it works as expected even using Json.
THANKS !
Rank 1
I was having the same problem as you where having but i actually found a solution to the problem so that you can still use the Autocomplete control. It's a small piece of code in jquery but could be implemented in other ways too! What i did was take the selected text from the autocomplete control and then iterated that text throught the data of datasource also on the autocomplete control. Something along the lines of this:
var autoContainer = $("#AutocompleteId").data("kendoAutoComplete");
var result = $.grep(autoContainer.dataSource.data(), function (item) {
return item.Text == autoContainer.value();
});
Happy Coding
Kevin Bosteels
Rank 1
Do we have any solution to it? I need to save ID as my value and display name on the screen.
.jpg)
Rank 2
http://jsbin.com/josijate/1/edit
I cannot verify if the value is set properly but the text seems to be correct. So to make it short, the datavaluefield is bindable via the html data binding and not as a direct option of AutoComplete as it seems.
The behavior of the AutoComplete widget has not changed, meaning that its value method will return the text of the selected item, rather than its ID. In the current scenario I would recommend using a ComboBox instead. If necessary, you could remove its button, making it look exactly like the AutoComplete widget. Here is an example how this could be achieved.
Regards,
Alexander Popov
Telerik
Rank 1
<body style="background-color:red">
<input id="fabric" type="text" style="width:300px;">
<button>Get value</button>
Manually resizing the span element used internally should solve this. Here is an updated example.
Regards,
Alexander Popov
Telerik
Rank 1
READ THIS SOLUTION
None of the above suggested solutions is helpful at all honestly. Even looping through the dataSource looking for a match can be bad, because its possible you have two different records with same 'name'.
And dropDownList is just NOT desired, nor is multiSelect!
Quite honestly, the lack of dataValueField is inexcusable. Breaks pattern of other widgets and for NO good reason. Telerik should fix this, not argue that you should use a different widget.
BULLETPROOF SOLUTION FOR NOW
This is just an example that assumes some things about your datasource, but holds true no matter what datasource you use.
01.$("#contactSearch").kendoAutoComplete({02.dataSource: {03.type: "odata",04.transport: {05.read: "your data source url here"06.},07.serverSorting: true,08.serverFiltering: true09.},10.filter: "contains",11.dataTextField: 'name',12.dataValueField: 'id', // <-- this doesn't work, but should!13.template: '<span data-recordid="#= id #"> #= name #</span>', // here we just use a template and put the id as data on the span wrapping the name14.select: function(e) {15. 16.// this is how you grab the id from the item selected17.console.log(e.item.find('span').data('recordid'));18.}19.});Never used the code formatter of this forum, hopefully it adds indents.
ENJOY!
Rank 1