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>