Kendo AutoComplete for Kendo Mobile?

Question

I am currently trying to use the kendo ui autocomplete widget in my mobile hybrid application. I can get the drop down to show up, but it isnt styled, the background is transparent. Does anyone know a way to fix this, and if not what is a good work around?

Html #SearchBox is my AutoComplete:

<ul data-role="listview" data-type="group">
        <li>
            <div id="SearchContainer">
                <input id="SearchBox" type="text" placeholder="Search..." />
            </div>
            <ul style="margin-top: 20px">
                <li class="LabelItems" data-bind="click: myProfile">
                    <div style="float: left; color: #656565;" data-bind="click: myProfile">My profile</div>
                    <img src="~/Images/imgChevron-gray.png" class="ChevronImage" data-bind="click: myProfile">
                </li>
                <li class="LabelItems">
                    <div style="float: left; color: #656565;">Groups</div>
                    <img src="~/Images/imgChevron-gray.png" class="ChevronImage">
                </li>
                <li class="LabelItems">
                    <div style="float: left; color: #656565;">Files</div>
                    <img src="~/Images/imgChevron-gray.png" class="ChevronImage">
                </li>
            </ul>
            <ul style="margin-top: 40px">
                <li class="LabelItems">
                    <div style="float: left; color: #656565;">Status update</div>
                    <img src="~/Images/imgChevron-gray.png" class="ChevronImage">
                </li>
                <li class="LabelItems">
                    <div style="float: left; color: #656565;">Start a conversation</div>
                    <img src="~/Images/imgChevron-gray.png" class="ChevronImage">
                </li>
            </ul>
            <ul style="margin-top: 40px">
                <li class="LabelItems">
                    <div style="float: left; color: #656565;">Settings</div>
                    <img src="~/Images/imgChevron-gray.png" class="ChevronImage">
                </li>
                <li class="LabelItems" data-bind="click: signOut">
                    <div style="float: left; color: #656565;" data-bind="click: signOut">Sign out</div>
                    <img src="~/Images/imgChevron-gray.png" class="ChevronImage" data-bind="click: signOut">
                </li>
            </ul>
        </li>
    </ul>

Template:

    <script id="template" type="text/x-kendo-template">
  <span>
    <img src="#: pic #" alt="" />
    #: name #
  </span>
</script>

Jquery:

$(document).ready(function () {

$("#SearchBox").kendoAutoComplete({
    dataSource: [
      { pic: "../MobilePlatform/GetSmallProfilePicById/jpantall", name: "Jonathan Pantall" }
    ],
    dataTextField: "name",
    template: kendo.template($("#template").html()),
});
});

Answer 1

hope following example will help you

 var items = new Array();
            $.getJSON(uri)
                .done(function (data) {
                    // On success, 'data' contains a list of products.                   
                    $.each(data, function (key, item) {                          
                        $('<li>', { text: item.UserName }).appendTo($('#users'));                          
                        items.push(item.DisplayName);
                    });
                    $("#tags").kendoAutoComplete({
                        dataSource: items,
                        filter: "startswith",
                        placeholder: "Select User...",
                        separator: ", "
                    });
                });