[ Quasar ] q-select 옵션 검색 API debounce 적용 | 한국어 입력 오류 해결

목표

▪️ q-select의 options를 input 입력을 통해 API로 조회하기

▪️ API 요청 횟수를 줄이기 위해 요청에 debounce 처리하기

▪️ 한국어 입력 시 단어 파괴 또는 오류가 없도록 하기

 

---

 

구현

 

1. 사용자 입력 허용

use-input
hide-selected
fill-input

위의 세 가지 속성을 추가해줘야 한다.

 

각각의 역할은

▪️ use-input : 사용자 입력 허용

▪️ hide-selected : 옵션에서 값을 선택하면 input 값과 selected된 값이 모두 필드에 보여지게 된다. 그때 선택된 값을 숨겨 하나만 나타나게 한다.

▪️ fill-input : hide-selected 속성과 함께 쓰인다. 입력한 값을 필드에 보여지게 한다.

   ※ fill-input 속성없이 hide-selected 속성만 사용하게 되면 옵션 선택 시 아무것도 필드에 나타나지 않는다.

 

 

 

2. 입력에 따른 이벤트 처리

예제와 달리 @input-value 이벤트를 활용했다.

text가 입력됐을 때 검색 결과를 반환해야 하기 때문.

@input-value="getNewOptions"

 

 

 

3. debounce 처리

lodash 라이브러리를 활용하여 간단하게 처리했다.

0.5초 이내로 값이 바뀌는 것에 대해서는 API 요청을 보내지 않고 해당 시간이 경과하면 한 번 보내는 것으로 서버로의 API 요청 횟수를 줄일 수 있다.

const getNewOptions = _.debounce(async (val: string) => {
  if (!val) options.value = [];
  else options.value = await getStkItem(val);
}, 500);

// getStkItem는 따로 정의한 api 호출 함수이다.

 

API 결과에 따라 q-select에 바인딩할 options의 값을 바꿔줬다.

입력이 없을 때는 options 또한 초기화했다.

 

 

 

다만 한국어의 경우 IME이기 때문에 글자가 조합되어야만 바인딩이 되는 문제가 있는데 이건 또 해결방법을 찾아봐야한다.

 

보통의 해결책은 v-model로 데이터를 양방향 바인딩하는 것 대신 @input 메서드를 이용해 data를 변경해주는 방법을 사용하면 된다는데, quasar의 경우에는 v-model에 바인딩되어 있는 것도 아니고 @input-value 메서드를 활용하는데도 한글은 이상하게 해준다.

 

다른 게시글을 찾아보니 q-input의 경우 getNativeElement 메서드를 활용하는 것 같은데, q-select는 해당 메서드가 없다….

 

 

결론적으로는 quasar가 제공하는 이벤트를 이용하는 대신 @input을 사용하는 것으로 해결했다. 

@input="getNewOptions"

const getNewOptions = _.debounce(async (e: InputEvent) => {
  const target = e.target as HTMLInputElement;

  if (!target.value) options.value = [];
  else options.value = await getStkItem(target.value);
}, 1000);

 

이렇게 했을 때, API 요청에는 입력한 값이 잘 들어간다.

다만 화면 상에서 마지막 입력한 글자가 사라지는 현상이 발생한다.

ex) “삼성” 입력 → target.value == “삼성” → 그러나 options.value가 바뀌면서 “삼성” 글자 중 마지막 글자가 탈락해 “삼”만 남음

 

options.value가 바뀌는 것이 화면 상에 보여지는 글자에 영향을 준다… → 왜지?

target.value는 계속해서 내가 입력한 값을 정확하게 가지고 있다는 것을 확인했다.

 

 

q-select의 updateInputValue 메서드를 사용해 input box의 값을 target.value로 갱신해 한글 파괴를 해결했다.

selectRef.value.updateInputValue(target.value);

 

 

 

 

---

[ 참고 자료 ] 

Select | Quasar Framework

Vue.js v-model 한글 사용 문제 초간단 해결 방법

[Quasar v2] q-input 한글입력 처리