Kendo UI [DropDownList] - 过滤搜索，如果未找到搜索项则显示消息
Posted
技术标签:
【中文标题】Kendo UI [DropDownList] - 过滤搜索，如果未找到搜索项则显示消息【英文标题】：Kendo UI [DropDownList] - Filter search, show message if search item did not found 【发布时间】：2016-05-31 12:37:31 【问题描述】：我正在使用带有搜索过滤器的 Kendo UI DropDownList...
如果下拉列表中没有搜索到的项目，我如何将搜索图标替换为“+ Add”链接和“No items available”消息...
Online Demo
请参考下图了解更多...
jQuery
$(document).ready(function()
$("#products").kendoDropDownList(
filter: "contains",
);
if ($('.k-list-scroller ul').length == 0)
$('.k-list-filter .k-i-search').hide();
$('.k-list-filter').append('<a href="#" id="newItem">+ Add</a>');
if ($('.k-list-scroller ul').length > 0)
$('.k-list-filter .k-i-search').show();
$('.k-list-filter #newItem').remove();
);
HTML
<h4>Products</h4>
<select id="products">
<option>Lorem</option>
<option>Ipsum</option>
<option>Dolar</option>
<option>Sit amet lieu</option>
</select>
【问题讨论】：
【参考方案1】：您仅在页面加载时运行您的代码（$(document).ready()）。每次文本框更新时，您都需要添加一个事件处理程序来使用您的代码。我能够为此添加一个 keyup 事件。
然而，一旦添加，代码会在 kendo 知道下拉列表中的值已更改之前运行。使用 delay，我们可以稍等片刻，让下拉菜单正确更新。
注意：我使用 500 毫秒作为延迟，但该数字不是 数字。
$(document).ready(function()
// set up the delay function
var delay = (function()
var timer = 0;
return function(callback, ms)
clearTimeout (timer);
timer = setTimeout(callback, ms);
;
)();
$("#products").kendoDropDownList(
filter: "contains"
);
// set up the event handler
$(".k-list-filter input").keyup(function ()
// wait for Kendo to catch up
delay(function ()
// check the number of items in the list and make sure we don't already have an add link
if ($('.k-list-scroller ul > li').length === 0 && !($("#newItem").length))
$('.k-list-filter .k-i-search').hide();
$('.k-list-filter').append('<a href="#" id="newItem">+ Add</a>');
// check the number of items in the list
if ($('.k-list-scroller ul > li').length > 0)
$('.k-list-filter .k-i-search').show();
$('.k-list-filter #newItem').remove();
, 500); // 500 ms delay before running code
);
);html font-size: 14px; font-family: Arial, Helvetica, sans-serif; <!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/dropdownlist/serverfiltering">
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2016.1.112/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
</head>
<body>
<h4>Products</h4>
<select id="products">
<option>Lorem</option>
<option>Ipsum</option>
<option>Dolar</option>
<option>Sit amet lieu</option>
</select>
</body>
</html>【讨论】：
@Jonathan...太好了...这就是我要找的东西，感谢您的时间和解释... :)以上是关于Kendo UI [DropDownList] - 过滤搜索，如果未找到搜索项则显示消息的主要内容，如果未能解决你的问题，请参考以下文章
Kendo UI 将 DropDownList 添加到 Grid (MVC)
Kendo UI [DropDownList] - 过滤搜索，如果未找到搜索项则显示消息