[英]Kendo UI [DropDownList] - Conflict in multiple elements
我正在將Kendo UI DropDownList元素與過濾器搜索一起使用。
如果用戶在下拉菜單中搜索而搜索到的項目不可用,則顯示+ Add
鏈接...
僅當我有一個<select>
框時,此方法才能按預期工作
感謝@Jonathan
,他在上述工作中提供了幫助:)
但是如果我有多個選擇框,則會出現問題
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>
這是因為.k-list-scroller
和.k-list-filter
是為所有3個下拉列表呈現的,但是如果只需要為當前dropdownlist訪問這些元素,請在keyup
事件中使用this
關鍵字:
$(".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
});
有幾個原因導致您想要實現的目標沒有實現。 一切都與您在keyup
函數中選擇項目的方式有關。 我將盡力解釋原因:
您正在使用k-list-scroller
選擇所有元素...共有3個。 所以這個表達的結果
$('.k-list-scroller ul > li').length === 0
在給定的上下文中將始終為假
同樣的事情在這里...
$('.k-list-filter .ki-search').hide();
當您嘗試隱藏放大鏡圖標時
這是一個工作代碼段...
$(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 .ki-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 .ki-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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.