This is a migrated thread and some comments may be shown as answers.

ComboBox as Autocomplete (problem with JSON)

8 Answers 842 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Igor
Top achievements
Rank 1
Igor asked on 24 Jan 2012, 11:59 PM
Hi,

I need a "ComboBox" to look and behave similar to "Autocomplete". I need "dataValueField" and "dataTextField" so I have to use "ComboBox" control. My "ComboBox" is using REST JSON service that filters the data, but the service is called only the first time.

$("#combobox").kendoComboBox({
   dataTextField: "Name",
   dataValueField: "ID",
   dataSource: {
      type: "json",
      transport: {
         read: {
            url: "...",
            contentType: "application/json;",
            dataType: "json",
            data: {
               name: function () {
return $("#combobox").val();
}
            }
}
}
}
});

I believe I have to use "change" event of "ComboBox", but I am not sure if this is the right pattern.

I would appreciate help. Thanks.

Igor

8 Answers, 1 is accepted

Sort by
0
Accepted
Georgi Krustev
Telerik team
answered on 27 Jan 2012, 09:03 AM
Hello,

 
You can check this jsFiddle which shows how to hide the arrow of the combobox. You also need to set the serverFiltering: true of the DataSource. 

Regards,
Georgi Krustev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Derek
Top achievements
Rank 1
answered on 31 Jan 2012, 02:37 PM
This does not really solve the problem addressed. It does not filter any of the results, it just skips to the closest one. If I type in "A", I get results that do not have any kind of an "A" in them.

It would really just be better if the original autocomplete could persist full JSON data so that we did not need to hack up combo box to do it.
0
Placinta
Top achievements
Rank 1
answered on 15 Feb 2012, 11:19 AM
I have the same problem and would appreciate an answer!
I tryed using keydown events on input field but no luck. The list is called only once and i cannot set a custom filter to specify custom characters like "ă" or "ţ" or "ş" or others! I used a custom dataSource and defined de "data" atribute with a custom callback to show the results! So, my JSON interpreter can handle filter but the kendo ui doesn't trigger it.
How can i solve this!
0
Georgi Krustev
Telerik team
answered on 16 Feb 2012, 02:42 PM
Hi,

 
The filtering is stopped by default in the combobox. Check this help topic for more information.

All the best,
Georgi Krustev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Placinta
Top achievements
Rank 1
answered on 17 Feb 2012, 09:56 AM
This doesn't solve the issue submited!
So, i want to define my data like this:
var data_here = new kendo.data.DataSource({
        transport: {
            read: {
                url: "url_to_json",
                dataType: 'json',
                    data:{
                        search:function(){
                             return $('#input_combobox').val();
                        }
                       }
                }
        }
    });
The ajax call will be something like this: "url_to_json.php?search=" + $('#input_combobox).val();
And the main question is: HOW TO TRIGGER FILTER ON THIS LINK EVERYTIME A USER TYPES CHARACTERS AND REPOPULATE THE COMBOBOX WITH RESULTS?

This is a sample of my code! Upper is the problem issued!
var data_here = new kendo.data.DataSource({
        transport: {
            read: {
                    url: "url_to_json",
                    dataType: 'json'               
                }
        }
    });
$("#input_id").kendoComboBox({
        index: -1,
        dataTextField: 'whatever',
        dataValueField: "id",
        dataSource: data_here,
        template:'whatever_here',
        filter: "contains",
        change:function(){
                          //do something here on change event
                }
});
0
Georgi Krustev
Telerik team
answered on 17 Feb 2012, 05:18 PM
Hello Placinta,

 
The combobox will filter the DataSource when the end-user types in the input element. By default the DataSource will cache the data. If you need to handle filtering on the server then you will need to set serverFiltering to true.

Regards,
Georgi Krustev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Francisco
Top achievements
Rank 1
answered on 08 Nov 2012, 09:25 PM
The serverFiltering=true does not work. The ajax call is triggered only once. Am I missing something?

 $("#RequestorContactId").kendoAutoComplete({
            minLength: 3,
            dataTextField: "Text",
            dataValueField: "Value",
            filter: 'contains',
            dataSource: {
                transport: {
                    read: "@Url.Action("_AutoCompleteAjaxRequestorsLoading", "Requestor")",
                    parameterMap: function (data) {
                        return { text: $("#RequestorContactId").val() };
                    }
                }
            },
            serverFiltering: true
        });
0
Ruud
Top achievements
Rank 1
answered on 16 Jan 2013, 04:08 PM
Hi,

It's not C# (Javascript just creates a property - probably at the wrong place - when it doesn't exist yet)!
The "serverFiltering: true,"  
should be a property under "dataSource".

Ruud Schneiders
Tags
ComboBox
Asked by
Igor
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Derek
Top achievements
Rank 1
Placinta
Top achievements
Rank 1
Francisco
Top achievements
Rank 1
Ruud
Top achievements
Rank 1
Share this question
or