안녕하세요 그레이프시티입니다.

먼저 답변이 지연된 점 죄송합니다.

문의 주신 내용에 대해 다음과 같이 답변 드립니다.

1. 특정 구분자를 이용하여 여러 검색어로 검색하는 방법에 대한 문의

 : 다음과 같은 방법으로 MultiSelectListBox 컨트롤의 항목을 특정 구분자로 구분해 여러 검색어로 검색하는 기능을 구현 할 수 있습니다.

1. MultiSelectListBox 컨트롤의 initialized 이벤트 호출 시, 전달되는 MultiSelectListBox 컨트롤의 인스턴스 값 sender를 이용하여 필터에 검색어를 입력하면 호출되는 input 이벤트를 설정합니다.
2. input 이벤트 호출 시, 필터에 입력된 검색어를 split() 메서드를 이용하여 ','를 기준으로 분리한 뒤 해당 배열을 변수 arr 에 저장합니다.
3. split() 메서드로 인해 생긴 공백을 filter() 메서드를 이용하여 제거한 뒤 해당 배열을 textArr 변수에 저장합니다.
4. join() 메서드를 이용하여 textArr 변수에 저장된 배열의 모든 요소를 하나로 연결합니다. 이때, join() 메서드의 매개변수를 OR 연산자인 '|'로 지정합니다.
5. 하나로 연결된 배열의 요소들을 RegExp() 생성자를 이용하여 정규표현식으로 변환한 뒤, test() 메서드를 이용하여 MultiSelectListBox 컨트롤의 항목들 중 정규표현식과 일치하는 항목을 검색합니다.
6. 필터에 검색어가 입력되는 시간을 주기 위해 setTimeout() 메서드를 이용하여 위의 단계들이 일정 시간을 가진 후 실행 되도록 구현합니다.

 위의 방법으로 작성된 아래의 코드를 참고해 보시기 바랍니다. 

const initialized = (sender, e) => {
    sender._filter.addEventListener("input", (e) => {
      setTimeout(() => {
        // ',' 로 구분하여 여러 검색어들로 항목들을 검색합니다.
        sender.listBox.collectionView.filter = (item, e) => {
          // ',' 를 기준으로 검색어를 분리하여 배열로 저장합니다.
          let arr = sender._filterText.split(",");
          // arr 배열에서 공백을 제거한 후 변수 textArr 에 저장합니다.
          const textArr = arr.filter((element) => {
            return element !== "";
          });

          // 변수 textArr에 저장된 배열 요소들로 정규표현식을 만들어 항목들을 검색합니다.
          if (
            new RegExp(textArr.join("|")).test(
              item[sender.displayMemberPath].toLowerCase()
            )
          ) {
            return true;
          }
          return false;
        };
      }, 500); //검색어 입력을 위해 약간의 시간을 줍니다.
    });
  };

2. 필터의 검색어 수정 시, 기존의 체크 되어 있던 항목의 체크가 해제되는 현상에 대한 문의

 : 문의 주신 현상의 경우 Wijmo 2020v2 버전에 존재하였던 버그로, Wijmo 2020v3 버전에서 해당 버그가 픽스되었습니다.

 2020v3 버전을 포함한 상위 버전의 WIjmo에서 checkOnFilter 속성을 false 로 설정한 MultiSelectListBox 컨트롤을 생성하여 테스트해 보시길 바랍니다.

 만약 Wijmo 2020v2 버전에서 문의 주신 내용을 구현하시길 원하신다면 아래의 샘플을 참고해 보시기 바랍니다.

 샘플은 다음과 같은 단계로 구현되었습니다.

1. 변수 checkedItemArr를 선언하고, checkedItemArr의 current 값에 Set() 생성자를 생성합니다.
2. MultiSelectListBox 컨트롤의 onCheckedItemsChanged 이벤트 호출 시, 현재 체크 된 항목들을 add() 메서드를 이용하여 checkedItemArr 의 current 에 저장합니다.
3. 필터의 검색어가 수정 혹은 삭제 된 후, checkedItemArr의 current에 저장된 항목들과 MultiSelectListBox 컨트롤의 항목들을 비교하여 기존에 체크 되어 있던 항목들을 다시 체크하는 함수 restoreChecked를 선언합니다.
4. 1번 문의 답변의 코드를 이용하여 MultiSelectListBox 컨트롤의 initialized 이벤트를 설정합니다.
5. MultiSelectListBox 컨트롤의 input 이벤트에서 검색이 모두 끝난 후, 기존의 체크 되어 있던 항목들이 체크 된 채로 유지되도록 restoreChecked 함수를 호출합니다.

- checkOnFilter API 문서

API 문서를 공유 드리며 다른 궁금한 점이 생기면, 문의 주시기 바랍니다.

감사합니다

그레이프시티 드림