ComboBox as Autocomplete (problem with JSON)

[Igor]

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

[Georgi Krustev]

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

[Derek]

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.

[Placinta]

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!

[Georgi Krustev]

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

[Placinta]

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

                }

});

[Georgi Krustev]

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

[Francisco]

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
        });

[Ruud]

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