ComboBox as Autocomplete (problem with JSON)

9 posts, 1 answers
  1. Igor
    Igor avatar
    18 posts
    Member since:
    Oct 2011

    Posted 24 Jan 2012 Link to this post

    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
  2. Answer
    Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 27 Jan 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Derek
    Derek avatar
    9 posts
    Member since:
    Mar 2009

    Posted 31 Jan 2012 Link to this post

    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.
  5. Placinta
    Placinta avatar
    7 posts
    Member since:
    Dec 2011

    Posted 15 Feb 2012 Link to this post

    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!
  6. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 16 Feb 2012 Link to this post

    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!
  7. Placinta
    Placinta avatar
    7 posts
    Member since:
    Dec 2011

    Posted 17 Feb 2012 Link to this post

    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
                    }
    });
  8. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 17 Feb 2012 Link to this post

    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!
  9. Francisco
    Francisco avatar
    7 posts
    Member since:
    Aug 2011

    Posted 08 Nov 2012 Link to this post

    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
            });
  10. Ruud
    Ruud avatar
    2 posts
    Member since:
    Nov 2011

    Posted 16 Jan 2013 Link to this post

    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
Back to Top
Kendo UI is VS 2017 Ready