동적 값으로 jQuery MultiSelect에 Kendo UI 사용

원본 게시물https://siderite.dev/blog/using-kendo-ui-for-jquery-multiselect-with-dynamic/

MultiSelect은 여러 항목을 선택할 수 있는 텍스트 필터링을 사용하여 선택 요소를 멋진 드롭다운으로 변환하는 검도 UI 컨트롤입니다. 이는 동일한 컨트롤을 사용하여 Outlook 주소 표시줄 기능과 유사한 목록에 직접 값을 쓰는 방법입니다.



간단히 말해서 컨트롤은 '필터링', '열기', '닫기' 및 '변경'과 같은 일부 이벤트를 노출합니다. 항목 목록을 필터링하기 위해 텍스트를 작성하거나 붙여넣는 사람에 의해 발생하는 필터링 이벤트에서 사용자가 Enter 키를 누르고 목록에 값을 입력할 수 있도록 해당 값을 보유하는 목록 항목을 동적으로 생성합니다. 이 코드는 또한 사용자 지정 변환 기능을 허용하므로 예를 들어 누군가 "1,2,3"을 입력하면 값이 "1,2,3"인 항목 대신 3개의 값 1, 2 및 3으로 변환됩니다. . 닫기 및 변경 이벤트에서 목록에서 선택되지 않은 항목을 지웁니다. 즉, 자동 완성 목록을 표시하고 동적 값을 추가하기 위해 이 코드를 있는 그대로 사용할 수 없지만 해당 목적을 위해 쉽게 조정할 수 있습니다.

그것을 사용하려면 $(selector).kendoMultiSelect(options) 대신 $(selector).kendoDynamicMultiSelect(options) 를 사용하십시오. 코드는 다음과 같습니다.

$.fn.kendoDynamicMultiSelect = function (options) {
  var multiSelect = $(this).kendoMultiSelect(options).getKendoMultiSelect();

  multiSelect.bind('filtering', function (ev) {
    var val = ev.filter && ev.filter.value;
    if (!val) return;

    var dataSource = ev.sender.dataSource;
    var items = dataSource.data();

    // if there is an existing item in the list, don't create a new one
    var existingItem = items.filter(function (i) {
      return i.value == val;
    })[0];
    if (existingItem) return;

    // find or create the item that will hold the current filter value
    var inputItem = items.filter(function (i) {
      return i.isInput;
    })[0];
    if (!inputItem) {
      inputItem = dataSource.insert(0, { isInput: true });
      // when inserting a value the input gets cleared in some situations
      // so set it back 
      ev.sender.input.val(ev.filter.value);
    }
    inputItem.value = val;
  });

  // cleans input items and also applies an optional value transformation function
  var updateValues = function (ev) {
    var values = ev.sender.value();
    if (typeof options.valueTransformationFunction === 'function') {
      // for example split comma separated values
      values = options.valueTransformationFunction(values);
    }

    var dataSource = ev.sender.dataSource;
    var items = dataSource.data();
    for (var i = 0; i < items.length; i++) {
      var item = items[i];
      item.shouldBeKept = false;
    }

    // add items for existing values
    for (var i = 0; i < values.length; i++) {
      var value = values[i];

      var item = items.filter(function (i) { return i.value == value; })[0];
      if (!item) {
        item = dataSource.add({ value: value });
      }
      item.isInput = false;
      item.shouldBeKept = true;
    }

    ev.sender.value(values);

    // delete all others
    for (var i = 0; i < items.length; i++) {
      var item = items[i];
      if (!item.shouldBeKept) {
        dataSource.remove(item);
      }
    }
  };

  multiSelect.bind('change', updateValues);
  multiSelect.bind('close', updateValues);
};

이 코드를 손으로 복사하고 다른 컴퓨터에서 시도했습니다. 버그를 발견하면 알려주세요. 또한 이것이 구시대 기술이라는 것을 알고 있지만 그들은 우리 회사에서 그것을 사용하고 있으며 인터넷 검색으로 이 기능을 찾을 수 없어서 여기 있습니다.

도움이 되길 바랍니다.