javascript - 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 个下拉列表呈现的，但是如果您只需要为当前下拉列表访问这些元素，在 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
});