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

문의하신 이슈의 경우, AutoComplete 컨트롤을 생성하는 createList2 사용자정의 함수 내에서 ComboBox 컨트롤들을 저장하는 dataItem의 list 배열에 AutoComplete를 할당하여 발생된 것으로 보입니다. 

  function createList2(cell, dataItem) {
    let auto = new wjInput.AutoComplete(document.createElement("div"), {
(....)
  //이슈 원인 코드
    dataItem.list = [auto];
  }

따라서 아래 코드와 같이 별도로 AutoComplete에 컨트롤를 저장하는 key를 설정하여 해당 키에 값을 할당하거나 사용하지 않는 경우 주석 처리 해주시기 바랍니다.

dataItem.listTwo = [auto];

다른 궁금한 점이 생기면, 문의 주시기 바랍니다.

감사합니다.

그레이프시티 드림

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

먼저 자세한 설명 및 코드 공유 감사드리며 문의에 대한 안내 드립니다.

1. autocomplete 자동 선택 이슈

=> textChanged 이벤트 내에서 itemsSource에 데이터를 바인딩할 때, selectedIndex가 지정되어 해당 이슈가 발생된 것으로 확인됩니다. 따라서 데이터 바인딩 후, selectedIndex를 -1로 두어 초기 선택 항목을 없애고 input 창에 입력한 텍스트 유지를 위해 text 속성에 기존 입력한 텍스트를 재할당하여 주시기 바랍니다.

2. text 삭제 시에도 자동 선택 반복 이슈

=> 해당 이슈의 경우, 텍스트를 삭제 시에도 textChanged가 호출 및 itemsSource가 재할당되면서 이슈가 발생된 것으로 확인됩니다. 따라서 해당 이슈를 해결하기 위해서는 AutoComplete의 itemsSource의 길이가 0일 때(즉 초기 호출일 때)만 데이터 바인딩 처리하도록 조건을 추가해주시길 바랍니다.

아래 간단한 코드를 참고하여 주시기 바랍니다.

function createList2(cell, dataItem) {
    var data = [];
    let auto = new wjInput.AutoComplete(document.createElement("div"), {
(....)
      textChanged: (s, e) => {
        if (s.itemsSource.length == 0){ // 데이터 유무 확인
         wjCore.httpRequest(
(....)
                  success: (xhr) => {
                    let response = JSON.parse(xhr.response);
                    var text = s.text //입력한 텍스트 저장
                    s.itemsSource = response.value; // 데이터 바인딩
                    s.selectedIndex = -1; 
                    s.text = text //입력한 텍스트 유지 위해 text 속성에 할당
                  }
(....)

- selectedIndex API 문서

- text API 문서

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

감사합니다.

그레이프시티 드림

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

1. 한글로 입력 시, textChanged 무제한 호출 이슈

=> 공유해주신 코드 상으로는 textChanged 내에 한글 입력 시, 반환되는 데이터가 빈 배열로 itemsSource에 재할당되고 있습니다. 더불어, 텍스트 유지를 위한 text 속성에 재설정으로 인한 textChanged 이벤트가 재호출되고 itemsSource의 길이가 0이므로 다시 기존 API가 호출되면서 해당 이슈가 발생되는 것으로 확인됩니다.

따라서 별도로 입력한 텍스트가 영문일 때만 해당 API를 호출되도록 하거나 데이터의 value가 []이면 itemsSource 및 text가 변동되지 않도록 조건을 설정해보시기 바랍니다.

2. 한글 minLength 설정 이슈

=> 해당 이슈의 경우, 한글이 입력되는 방식으로 인해 발생된 케이스입니다. 한글을 입력할 때 음절 블록을 완성하여 단일 단위로 입력하기 전까지 밑줄이 표시됩니다. 밑줄이 사라지기 전까지는 length 값이 인식되기 전이므로 문자를 입력하신 다음, Enter 키 또는 방향키 등을 이용하여 단일 문자로 등록하셔야 밑줄이 사라지면서 length 값 인식 및 드롭다운 리스트가 나타납니다.

이는 한글이 조합형 문자이기 때문에 발생하는 현상으로, AutoComplete 기능이 제한적으로 동작되는 점 양해 부탁드립니다. 

원하시는 도움을 드리지 못해 죄송합니다.

다른 궁금한 점이 생기면, 문의 주시기 바랍니다.

감사합니다.

그레이프시티입니다.