jquery - Kendo Mobile的Kendo AutoComplete？

我目前正在尝试在移动混合应用程序中使用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()),
});
});

最佳答案

希望以下示例对您有帮助

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

关于jquery - Kendo Mobile的Kendo AutoComplete？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23087049/