Manually open the autocomplete suggestion and refresh the data

2 posts, 0 answers
  1. erymuzuan
    erymuzuan avatar
    1 posts
    Member since:
    Nov 2010

    Posted 28 Jul 2013 Link to this post

    I just have a simple needs, building intellisense feature for my app, got everything working but the KendoUI autocomplete doesn't have open method to manually open the popup when the user type ".",

    see the sample code, see line 41 (where I need to manually open the autocomplete)  and line 51 , replace the suggestion list
     
    01.var tree = GetTheListOfSuggestionFromSomewhere();
    02.var data = _.chain(tree)
    03.    .map(function (t) {
    04.        if (t.parent === "")
    05.            return t.name;
    06.        return undefined;
    07.    })
    08.    .filter(function (t) {
    09.        return typeof t !== "undefined";
    10.    })
    11.    .value();
    12. 
    13.console.log(data);// this log out  array of string
    14. 
    15.var dataSource = new kendo.data.DataSource({
    16.    data: data
    17.});
    18.var input = $(element).data("kendoAutoComplete") ||
    19.   $(element).kendoAutoComplete({
    20.       dataSource: tree,
    21.       dataTextField: "path",
    22.       change: function () {
    23.           var path = this.value();
    24.           console.log("selected path ", path);
    25. 
    26.       },
    27.       filter: "startswith",
    28.       placeholder: "Select path...",
    29.       separator: ""
    30.   }).data("kendoAutoComplete");
    31. 
    32.$(element)
    33.        .change(function () {
    34.            value($(this).val());
    35.            console.log("new value", value());
    36.        })
    37.       .val(value())
    38.    .on("keydown", function (e) {
    39.        if (e.which === 110 || e.which === 190) {
    40.            var path = $(this).val() + ".";
    41.            console.log("show the auto complete", path);
    42.            var filtered = _.chain(tree)
    43.                .filter(function (t) {
    44.                    return t.parent === path;
    45.                })
    46.                .map(function (t) {
    47.                    return t.name;
    48.                })
    49.                .value();
    50.            console.log(filtered);
    51.            //input.setDataSource(dataSource);
    52.            dataSource.data(filtered);
    53.            input.refresh();
    54.        }
    55.    });
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 31 Jul 2013 Link to this post

    Hello,

     Perhaps you can use the search method. It will display the results matching the search argument.

    Regards,
    Atanas Korchev
    Telerik
    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
Back to Top