Kendo Mobile 的 Kendo AutoComplete？

Posted 2023-05-07

【中文标题】Kendo Mobile 的 Kendo AutoComplete？

【英文标题】：Kendo AutoComplete for Kendo Mobile?

【发布时间】：2014-05-30 00:05:58

【问题描述】：

我目前正在尝试在我的移动混合应用程序中使用 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 #"  />
    #: name #
  </span>
</script>

jquery：

$(document).ready(function () 

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

【参考方案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: ", "
                    );
                );