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

Question

我正在将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>

Answer 1

这是因为.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
}); 

Answer 2

有几个原因导致您想要实现的目标没有实现。 一切都与您在keyup函数中选择项目的方式有关。 我将尽力解释原因：

1. 您正在使用k-list-scroller选择所有元素...共有3个。 所以这个表达的结果

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

在给定的上下文中将始终为假

2. 同样的事情在这里...

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

当您尝试隐藏放大镜图标时

3. 最后但并非最不重要的一点是，当满足上述条件时，您需要延迟内部代码块的执行，因为kendo / telerik会操纵下拉项并使之可见，换句话说，只要隐藏搜索图标，telek就会显示立即。

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

 $(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>