안녕하세요 그레이프시티입니다.
먼저 답변이 지연된 점 죄송합니다.
문의 주신 내용에 대해 다음과 같이 답변 드립니다.
1. 특정 구분자를 이용하여 여러 검색어로 검색하는 방법에 대한 문의
: 다음과 같은 방법으로 MultiSelectListBox 컨트롤의 항목을 특정 구분자로 구분해 여러 검색어로 검색하는 기능을 구현 할 수 있습니다.
- MultiSelectListBox 컨트롤의 initialized 이벤트 호출 시, 전달되는 MultiSelectListBox 컨트롤의 인스턴스 값 sender를 이용하여 필터에 검색어를 입력하면 호출되는 input 이벤트를 설정합니다.
- input 이벤트 호출 시, 필터에 입력된 검색어를 split() 메서드를 이용하여 ','를 기준으로 분리한 뒤 해당 배열을 변수 arr 에 저장합니다.
- split() 메서드로 인해 생긴 공백을 filter() 메서드를 이용하여 제거한 뒤 해당 배열을 textArr 변수에 저장합니다.
- join() 메서드를 이용하여 textArr 변수에 저장된 배열의 모든 요소를 하나로 연결합니다. 이때, join() 메서드의 매개변수를 OR 연산자인 '|'로 지정합니다.
- 하나로 연결된 배열의 요소들을 RegExp() 생성자를 이용하여 정규표현식으로 변환한 뒤, test() 메서드를 이용하여 MultiSelectListBox 컨트롤의 항목들 중 정규표현식과 일치하는 항목을 검색합니다.
- 필터에 검색어가 입력되는 시간을 주기 위해 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 버전에서 문의 주신 내용을 구현하시길 원하신다면 아래의 샘플을 참고해 보시기 바랍니다.
샘플은 다음과 같은 단계로 구현되었습니다.
- 변수 checkedItemArr를 선언하고, checkedItemArr의 current 값에 Set() 생성자를 생성합니다.
- MultiSelectListBox 컨트롤의 onCheckedItemsChanged 이벤트 호출 시, 현재 체크 된 항목들을 add() 메서드를 이용하여 checkedItemArr 의 current 에 저장합니다.
- 필터의 검색어가 수정 혹은 삭제 된 후, checkedItemArr의 current에 저장된 항목들과 MultiSelectListBox 컨트롤의 항목들을 비교하여 기존에 체크 되어 있던 항목들을 다시 체크하는 함수 restoreChecked를 선언합니다.
- 1번 문의 답변의 코드를 이용하여 MultiSelectListBox 컨트롤의 initialized 이벤트를 설정합니다.
- MultiSelectListBox 컨트롤의 input 이벤트에서 검색이 모두 끝난 후, 기존의 체크 되어 있던 항목들이 체크 된 채로 유지되도록 restoreChecked 함수를 호출합니다.
- checkOnFilter API 문서
API 문서를 공유 드리며 다른 궁금한 점이 생기면, 문의 주시기 바랍니다.
감사합니다
그레이프시티 드림