Kendo Mobile 的 Kendo AutoComplete？

Question

我目前正在尝试在我的移动混合应用程序中使用 kendo ui 自动完成小部件。我可以让下拉菜单显示出来，但它没有样式，背景是透明的。有谁知道解决这个问题的方法，如果不知道有什么好的解决方法？

Html #SearchBox 是我的自动完成功能：

<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>

模板：

    <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

希望以下示例对您有所帮助

 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: ", "
                    });
                });