Jquery 剑道界面[DropDownList]-过滤搜索，如果未找到搜索项，则显示消息

我正在使用剑道UI下拉列表和搜索过滤器

如果在下拉列表中搜索的项目不可用，如何将搜索图标替换为“

+添加”

”链接为“

无可用项目”

”消息

请参考下图了解更多说明。。。

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();
    }

});

$（文档）.ready（函数（）{
$（“#产品”）。kendoDropDownList({
过滤器：“包含”，
});
如果（$（'.k-list-scroller ul'）。长度==0）{
$（'.k-list-filter.k-i-search'）.hide（）；
$（'.k-list-filter'）。追加（''）；
}
如果（$（'.k-list-scroller ul'）。长度>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>

产品
洛勒姆
乱数假文
多拉
坐在阿梅特利乌

只有当页面加载（$（document）.ready（）时，您才运行代码。您需要添加一个事件处理程序，以便在每次文本框更新时使用您的代码。我可以为它添加一个keyup事件

但是，一旦添加了该选项，代码就会在剑道知道下拉列表中的值已更改之前运行。使用，我们可以暂停片刻，让下拉列表正确更新

注意：我使用了500毫秒的延迟，但是这个数字不是这个数字

$（文档）.ready（函数（）{
//设置延迟功能
变量延迟=（函数（）{
var定时器=0；
返回函数（回调，毫秒）{
清除超时（计时器）；
定时器=设置超时（回调，毫秒）；
};
})();
$（“#产品”）。kendoDropDownList({
过滤器：“包含”
});
//设置事件处理程序
$（“.k-list-filter输入”）.keyup（函数（）{
//等待剑道赶上
延迟（函数（）{
//检查列表中的项目数，确保我们没有添加链接
if（$（'.k-list-scroller ul>li'）.length==0&！（$（“#newItem”）.length））{
$（'.k-list-filter.k-i-search'）.hide（）；
$（'.k-list-filter'）。追加（''）；
}
//检查列表中的项目数
如果（$（'.k-list-scroller ul>li'）。长度>0）{
$（'.k-list-filter.k-i-search'）.show（）；
$（'.k-list-filter#newItem'）.remove（）；
}
}，500）；//运行代码前延迟500毫秒
});    
});
html{font size:14px；字体系列：Arial、Helvetica、sans serif；}

产品
洛勒姆
乱数假文
多拉
坐在阿梅特利乌
@Jonathan。。。杰出的这就是我要找的，谢谢你的时间和解释……）