[Solved] Binding AutocompleteBox to XML question

[Michael]

Hi,

I'm trying to use the AutocompleteBox with a datasource bound to a service that returns XML. At the moment the request to the service only seems to fire once. Also I can't get the Search suggestions to show up. Below are details, can you tell me what I'm doing wrong?

Thanks,
Michael

WinJS.UI.Pages.define("/pages/tvshows.html", {
    // This function is called whenever a user navigates to this page. It
    // populates the page elements with the app's data.
    ready: function (element, options) {

        var dataSourceAutoCompleteCtrl = new Telerik.UI.RadAutoCompleteBox(document.getElementById('dataSourceAutoComplete'), {
            minLength: 2,
            dataTextField: "short",
            filter: "contains",
            dataSource: {
                type: "xml",
                transport: {
                    read: {
                        url: "http://api-public.netflix.com/catalog/titles/autocomplete",
                        data: {
                            term: function () {
                                return dataSourceAutoCompleteCtrl.value;
                            },
                            oauth_consumer_key: apiKey
                        }
                    },
                    schema: {
                        type: "xml",

                        data: "autocomplete_item/title"
                    }
                }
            }
        });
    },

Example XML that is being returned on the first call given a query of 'Dexter' . I'm trying to get the title attribute to show up as a suggestion.

<?xml version="1.0" standalone='yes'?>
<autocomplete>
  <url_template>http://api-public.netflix.com/catalog/titles/autocomplete?{-join|&|term}</url_template>
  <autocomplete_item>
    <title short="Dexter's Laboratory: Season 1"></title>
  </autocomplete_item>
  <autocomplete_item>
    <title short="Dexter"></title>
  </autocomplete_item>
  <autocomplete_item>
    <title short="Dexter Gordon and McCoy Tyner: Cool Summer"></title>
  </autocomplete_item>
  <autocomplete_item>
    <title short="Dexterity: Reggae Madness"></title>
  </autocomplete_item>
  <autocomplete_item>
    <title short="Dexter Darden"></title>
  </autocomplete_item>
  <autocomplete_item>
    <title short="Jazz Icons: Dexter Gordon: Live in '63 & '64"></title>
  </autocomplete_item>
</autocomplete>

 

 

 

 

[Tsvetina]

Hi Michael,

I am posting my answer from the support ticket that I just answered, in case anyone else has similar problems with binding RadAutoCompleteBox to XML.

We looked through your code and noticed a few issues with the definition of the DataSource component
which represents the RadAutoCompleteBox dataSource.

1) You have to take the schema outside of the transport options. With the current definition, it is not interpreted by the control.

2) The schema.data property value should start from the root node that contains all autocomplete_item nodes: "/autocomplete/autocomplete_item/title".

3) You should define a model for the fetched data in the schema options. In this case, it is a simple one that defines only the short field. For better readability, you can even rename the field.

With all these changes applied your control definition should look like this:

 

var dataSourceAutoCompleteCtrl = new Telerik.UI.RadAutoCompleteBox(document.getElementById('dataSourceAutoComplete'), {
    minLength: 2,
    dataTextField: "title",
    filter: "contains",
    dataSource: {
        transport: {
            read: {
                url: "http://api-public.netflix.com/catalog/titles/autocomplete",
                data: {
                    term: function () {
                        return dataSourceAutoCompleteCtrl.value;
                    },
                    oauth_consumer_key: apiKey
                }
            }
        },
        schema: {
            type: "xml",
            data: "/autocomplete/autocomplete_item/title",
            model: {
                fields: {
                    title: "@short"
                }
            }
        }
    }
});

Regards,
Tsvetina
the Telerik team