KendoUI的下拉框展示图片功能

最新推荐文章于 2023-01-17 10:49:08 发布

木生火18624

最新推荐文章于 2023-01-17 10:49:08 发布

阅读量535

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery

本文链接：https://blog.youkuaiyun.com/penghao_1/article/details/86009538

jquery 专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何使用 Kendo UI 的自动完成组件创建带有图片和联系信息的下拉列表。通过设置 headerTemplate 和 footerTemplate 属性，可以自定义列表的头部和底部模板。同时，通过 dataSource 的 transport.read 属性，可以从远程服务器获取数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script>
                $(document).ready(function() {
                    var autocomplete = $("#customers").kendoAutoComplete({
                        minLength: 1,
                        dataTextField: "ContactName",
                        headerTemplate: '<div class="dropdown-header k-widget k-header">' +
                                '<span>Photo</span>' +
                                '<span>Contact info</span>' +
                            '</div>',
                        footerTemplate: 'Total #: instance.dataSource.total() # items found',
                        template: '<span class="k-state-default" style="background-image: url(\'../content/web/Customers/#:data.CustomerID#.jpg\')"></span>' +
                                  '<span class="k-state-default"><h3>#: data.ContactName #</h3><p>#: data.CompanyName #</p></span>',
                        dataSource: {
                            transport: {
                                read:{
                                    dataType: "jsonp",
                                    url: "https://demos.telerik.com/kendo-ui/service/Customers"
                                }
                            }
                        },
                        height: 400
                    }).data("kendoAutoComplete");
                });
            </script>
在于这段代码
    headerTemplate: '<div class="dropdown-header k-widget k-header">' +
                                '<span>Photo</span>' +
                                '<span>Contact info</span>' +
                            '</div>',