Kendo UI [DropDownList] - 多个元素的冲突

Question

我正在使用Kendo UI DropDownList元素带过滤器搜索。

如果内部下拉用户搜索和搜索项不可用我显示+ Add链接...

这正按预期只有当我有一个<select>箱

感谢@Jonathan，谁在帮助上述:)

但是，得到的问题，如果我有1个多选择框

Online Demo

jQuery的

$(document).ready(function() { 
    // set up the delay function 
    var delay = (function(){ 
    var timer = 0; 
    return function(callback, ms) { 
     clearTimeout (timer); 
     timer = setTimeout(callback, ms); 
    }; 
    })(); 

    $(".selectBox").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="javascript:;" class="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

<div class="row"> 
    <div class="col-xs-4"> 
    <div class="field"> 
     <select class="selectBox"> 
     <option>-- Select 1 --</option> 
     <option>Lorem</option> 
     <option>Ipsum</option> 
     <option>Dolar</option> 
     </select> 
    </div> 
    </div> 
    <div class="col-xs-4"> 
    <div class="field"> 
     <select class="selectBox"> 
     <option>-- Select 2 --</option> 
     <option>Lorem</option> 
     <option>Ipsum</option> 
     <option>Dolar</option> 
     <option>Sit amet lieu</option> 
     </select> 
    </div> 
    </div> 
    <div class="col-xs-4"> 
    <div class="field"> 
     <select class="selectBox"> 
     <option>-- Select 3 --</option> 
     <option>Lorem</option> 
     <option>Ipsum</option> 
     <option>Dolar</option> 
     </select> 
    </div> 
    </div> 
</div> 

Answer 1

其因.k-list-scroller和.k-list-filter呈现所有3个dropdownlists，但如果您将n电子娱乐设备访问这些元素只对当前的下拉列表中，使用this关键字里面keyup事件：

$(".k-list-filter input").keyup(function() { 
    //"this" represents html input element 
    var listFilter = $(this).closest('.k-list-filter'); 
    var listScroller = $(this).closest('.k-list-container').find('.k-list-scroller'); 
    // 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 (listScroller.find('ul > li').length === 0 && !listFilter.find(".newItem").length) { 
      listFilter.find('.k-i-search').hide(); 
      listFilter.append('<a href="javascript:;" class="newItem">+ Add</a>'); 
     } 
     // check the number of items in the list 
     if (listScroller.find('ul > li').length > 0) { 
      listFilter.find('.k-i-search').show(); 
      listFilter.find('.newItem').remove(); 
     } 
    }, 500); // 500 ms delay before running code 
}); 

Answer 2

有几个原因，你想达到什么没有发生。一切都与你如何选择keyup函数中的项目有关。我会尽我所能解释为什么：

1. 您选择与k-list-scroller所有元素......还有他们的3。所以这个表达式的结果

   $('.k-list-scroller ul > li').length === 0

将永远是假的在给定上下文

同样的情况在这里...

$('.k-list-filter .k-i-search').hide();

当您尝试隐藏放大镜图标

1. 最后但并非最不重要，当满足上述条件时，您需要延迟执行代码块，因为kendo/telerik操作下拉项目并使其可见，换句话说，只要您隐藏搜索图标，telerik会立即显示它。

这是一个工作代码片段...

$(document).ready(function() { 
 
    // set up the delay function 
 
    var delay = (function(){ 
 
    var timer = 0; 
 
    return function(callback, ms) { 
 
     clearTimeout (timer); 
 
     timer = setTimeout(callback, ms); 
 
    }; 
 
    })(); 
 

 
    $(".selectBox").kendoDropDownList({ 
 
    filter: "contains" 
 
    }); 
 

 
    // set up the event handler 
 
    $(".k-list-filter input").keyup(function() { 
 
    
 
    var self = this; 
 

 
    // 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 
 
     
 
     var itemsFound = $(self).parents('.k-list-container').find(".k-list-scroller ul > li").length; 
 
     
 
     if (itemsFound === 0 && !($(".newItem").length)) { 
 
     console.log("Adding new"); 
 
     setTimeout(function(){ 
 
     $(self).parents('.k-list-container').find('.k-list-filter .k-i-search').hide(); 
 
     $(self).parents('.k-list-container').find('.k-list-filter').append('<a href="javascript:;" class="newItem">+ Add</a>'); 
 
     }, 50); 
 
     } 
 

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

body{font-family:Verdana;font-size:12px;margin:50px 10px;} 
 
.k-header{border:1px solid #ccc;background:#fff;} 
 
.newItem{position:absolute;top:8px;right:10px;}

<link rel="stylesheet" type="text/css" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css"/> 
 
<link rel="stylesheet" type="text/css" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.common-material.min.css"/> 
 
<link rel="stylesheet" type="text/css" href="//kendo.cdn.telerik.com/2016.1.112/styles/kendo.material.min.css"/> 
 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<script type="text/javascript" src="//kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script> 
 

 
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 

 
<div class="row"> 
 
    <div class="col-xs-4"> 
 
    <div class="field"> 
 
     <select class="selectBox"> 
 
     <option>-- Select 1 --</option> 
 
     <option>Lorem</option> 
 
     <option>Ipsum</option> 
 
     <option>Dolar</option> 
 
     </select> 
 
    </div> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
    <div class="field"> 
 
     <select class="selectBox"> 
 
     <option>-- Select 2 --</option> 
 
     <option>Lorem</option> 
 
     <option>Ipsum</option> 
 
     <option>Dolar</option> 
 
     <option>Sit amet lieu</option> 
 
     </select> 
 
    </div> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
    <div class="field"> 
 
     <select class="selectBox"> 
 
     <option>-- Select 3 --</option> 
 
     <option>Lorem</option> 
 
     <option>Ipsum</option> 
 
     <option>Dolar</option> 
 
     </select> 
 
    </div> 
 
    </div> 
 
</div>