Input React 응용 프로그램에 검색 자동 완성 기능을 추가하는 방법
페이지 정보
작성자 GrapeCity
작성일 2022-10-13 10:16 조회 1,188회
댓글 0건
본문
관련링크
사용자에게 선택할 수 있는 일치하는 값 목록을 제공하는 이러한 검색 상자를 AutoComplete 컨트롤이라고 합니다. 이름을 보면 알 수 있듯이 AutoComplete 컨트롤은 사용자가 입력하는 문자열을 자동으로 완성하여 전체 문자열을 입력하지 않아도 일치하는 값을 선택할 수 있도록 도와줍니다.
우리는 AutoComplete 컨트롤을 매일 사용합니다. 아래 스크린샷에서 볼 수 있는 것처럼 Google 검색 창과 Google 지도의 위치 검색은 자동 완성의 형태입니다.
보시다시피 AutoComplete 컨트롤에 텍스트를 입력하면 입력된 텍스트를 기반으로 가능한 다른 선택 항목이 표시됩니다. (Google 검색의 경우 입력된 텍스트가 표준으로 표시되고 자동으로 완성된 텍스트는 굵게 표시되며, Google 지도에서는 이와 반대로 표시됨)
HTML 및 JavaScript를 사용하여 React Autocomplete 컨트롤을 처음부터 빌드할 수 있지만 그러려면 많은 개발 작업을 수행해야 합니다. 그렇기 때문에 대신 Wijmo의 React AutoComplete 컨트롤을 사용하여 검색 기능을 구현해 보겠습니다. 이 블로에서는 다음 내용을 다룹니다.
Wijmo의 React AutoComplete 컨트롤 구현
표시된 콘텐츠 사용자 정의
AutoComplete 컨트롤 스타일 지정
이 응용 프로그램을 다운로드하려면 에서 다운로드할 수 있습니다. NPM을 통해 Wijmo를 설치하거나 여기서 라이브러리를 다운로드할 수 있습니다.
NPM은 개발자가 GrapeCity의 컨트롤을 설치하는 가장 일반적인 방법입니다. GrapeCity의 라이브러리 다운로드에는 JavaScript, Angular, React 및 Vue와 참조 앱에서 사용할 수 있는 수백 가지 샘플 등 다른 이점이 포함되어 있습니다.
Wijmo의 React AutoComplete 컨트롤 구현
먼저, 응용 프로그램에 를 설치해야 합니다. 그러면 React AutoComplete 컨트롤을 인스턴스화할 수 있습니다. 설치 단계는 를 참조하세요.
Wijmo가 설치되면 적절한 파일을 참조해야 합니다. 이 응용 프로그램에는 Wijmo의 CSS, 코어 및 입력 파일만 있으면 됩니다. 다음 파일은 App.js 및 index.css 파일에 포함되어 있습니다.
index.css
@import '@grapecity/wijmo.styles/themes/wijmo.theme.material.css';
App.js
import * as wjCore from '@grapecity/wijmo'; import * as wjcInput from '@grapecity/wijmo.react.input';
이제 필요한 파일을 가져왔으므로 Wijmo의 React AutoComplete 컨트롤에 대한 코드를 HTML에 추가할 수 있습니다. 또한 데이터를 올바르게 표시할 수 있도록 이 컨트롤에 대한 몇 가지 속성을 설정해 볼 것입니다.
<div className='App'>
<wjcInput.AutoComplete itemsSource={cv} displayMemberPath="state" headerPath="state" isContentHtml={true}></wjcInput.AutoComplete>
</div>각 속성의 용도는 아래와 같습니다.
itemsSource: 표시될 데이터
displayMemberPath: 바인딩하려는 데이터 객체의 속성
headerPath: 텍스트 영역에 표시하려는 속성
isContentHtml: 컨트롤에 맞춤 콘텐츠가 HTML이라고 알림
이제 headerPath와 displayMemberPath는 비슷한 속성처럼 보일 수 있는데, 선택한 항목을 텍스트 상자에 올바르게 표시할 수 있도록 합니다. 일반적으로 표시된 콘텐츠를 itemFormatter를 통해 수정하는 경우 텍스트 상자에서도 반영될 수 있습니다. 따라서 예를 들어, 드롭다운의 요소에 추가 텍스트를 표시하려고 하는데 headerPath를 설정하지 않은 경우 수정된 텍스트는 컨트롤의 텍스트 상자 내에도 표시됩니다.
이제 컨트롤을 설정했으므로 표시할 데이터가 필요합니다. 이 응용 프로그램의 경우 AutoComplete 컨트롤에 미국, 캐나다, 멕시코의 주/도를 표시합니다. 데이터의 양식은 다음과 같습니다.
{
"state": "Connecticut",
"country": "United States"
},이렇게 하려면 CollectionView를 설정하고 fetch 호출을 만듭니다. fetch 호출 내에서 검색하는 데이터를 CollectionView에 할당합니다.
const [cv, setCollectionView] = useState(new wjCore.CollectionView([], {}));
useEffect(() => {
fetch('https://mocki.io/v1/c8e84317-feaa-40ea-89cf-2af1fb611d49').then(response => response.json()).then(data => cv.sourceCollection = data);
});CollectionView는 데이터 배열을 관리하도록 설계된 Wijmo 데이터 객체입니다. 또한 이러한 배열을 컨트롤에 직접 할당할 수도 있고 CollectionView를 만들도록 허용할 수도 있습니다. 하지만 수정하도록 선택한 경우 CollectionView를 더욱 쉽게 수정할 수 있도록 합니다.
이제 응용 프로그램을 실행하고 텍스트 상자에 입력하면 다음 내용을 볼 수 있습니다.
아직 할 일이 조금 더 남았습니다. 다음 섹션에서는 AutoComplete 컨트롤 내에 표시된 내용을 사용자 정의하는 방법을 살펴보겠습니다.
표시된 콘텐츠 사용자 정의
React AutoComplete 컨트롤을 구현했지만 표시된 값에 대한 추가 정보를 보여 주는 Google 지도의 AutoComplete 모양을 구현해 보겠습니다. 우선, 주/도가 위치한 국가도 표시해 보겠습니다.
이렇게 하기 위해 사용자 정의 메서드를 만들어 AutoComplete 컨트롤의 이벤트 중 하나인 itemFormatter 이벤트에 연결해 보겠습니다.
App.js
function customItemFormatter(index, content) {
let country = 'N/A';
for(var i = 0; i < cv.sourceCollection.length; i++) {
if(content === cv.sourceCollection[i].state) {
country = cv.sourceCollection[i].country;
}
}
content = '<span class="primary">' + content + ' </span><span class="secondary">' + country + '</span>';
return content;
}
....
<wjcInput.AutoComplete itemsSource={cv} displayMemberPath="state" headerPath="state" isContentHtml={true} itemFormatter={customItemFormatter.bind(this)}></wjcInput.AutoComplete>itemFormatter 이벤트는 드롭다운 목록의 항목이 생성될 때마다 실행됩니다. 따라서 드롭다운 목록의 각 항목 내용을 사용자 정의할 수 있습니다.
주/도가 있는 국가를 표시하고 싶기 때문에 데이터 배열을 통해 구문을 분석하고 표시되는 내용에 일치하는 주가 포함된 항목을 찾아 내용 문자열에 해당 국가를 추가하기만 하면 됩니다.
앞서 AutoComplete 컨트롤에 표시하는 콘텐츠가 HTML이라고 알린다고 말씀 드렸습니다. 따라서 이 문자열 안에서 약간의 HTML을 정의합니다. 다음 섹션에서는 <spans>에 할당된 클래스를 사용하여 컨트롤에 스타일을 좀 더 지정해 보겠습니다.
이제 응용 프로그램을 실행하면 다음 내용을 볼 수 있습니다.
보시다시피 검색하면 국가도 표시됩니다. 선택하면 주/도의 이름만 표시되는 것이 보입니다.
이런 이유로 앞에서 headerPath 속성을 설정한 것입니다.
다음 섹션에서는 응용 프로그램의 디자인에 맞춰 컨트롤의 스타일을 지정하는 방법을 살펴보겠습니다.
AutoComplete 컨트롤 스타일 지정
이제 컨트롤이 원하는 형식으로 데이터를 표시하므로 컨트롤에 스타일을 추가할 차례입니다. 먼저, 이전 섹션에서 추가한 <span> 태그를 사용하여 텍스트에 스타일을 지정합니다.
App.css
.primary {
font-weight: bold;
}
.secondary {
font-size: small;
color: gray;
}이 코드를 사용하면 검색 중인 주요 텍스트(주/도)를 강조 표시하고 국가 텍스트에 대한 일부 포커스를 해제할 수 있습니다.
컨트롤 자체에 스타일을 적용하기 위한 두 가지 옵션이 있습니다.
첫 번째 옵션은 Wijmo의 기본 제공 스타일 옵션 중 하나를 사용하는 것입니다. 아래 데모 링크에서 전체 옵션 목록을 확인할 수 있습니다.
두 번째 옵션은 자체 스타일을 적용하는 것입니다. 이 응용 프로그램의 경우 자체 스타일을 지정해 보겠습니다.
컨트롤에 스타일을 지정하기 전에 짚고 넘어가야 할 점이 한 가지 있습니다. Wijmo CSS 클래스를 변경할 때 이러한 변경 사항을 컨트롤에 적용하려면 최상위 CSS 파일에 이 CSS를 포함해야 합니다. 이 응용 프로그램의 경우 index.css 파일이 됩니다.
index.css
.wj-control.wj-content.wj-dropdown, .wj-control.wj-content.wj-inputnumber, .wj-control.wj-content.wj-inputmask {
color: hsl(0, 0%, 80%);
background: hsl(0, 0%, 33%);
}
.wj-control .wj-input-group .wj-input-group-btn:last-child:not(:first-child)>.wj-btn, .wj-viewer .wj-control .wj-input-group .wj-input-group-btn:last-child:not(:first-child)>.wj-applybutton {
color: hsl(0, 0%, 80%);
}
.wj-control .wj-input-group .wj-form-control {
color: hsl(0, 0%, 80%);
background: hsl(0, 0%, 33%);
width: 100% !important;
}
.wj-listbox .wj-listbox-item {
color: hsl(0, 0%, 80%);
background: hsl(0, 0%, 33%);
}
.wj-listbox .wj-listbox-item:hover {
background: hsl(0, 0%, 27%) !important;
cursor: pointer;
}
.wj-listbox-item.wj-state-selected {
background: hsl(0, 0%, 27%);
}
.wj-control .wj-btn:hover {
background: hsl(0, 0%, 45%);
}이제 추가한 CSS 파일에 대해 설명해 보겠습니다. 수정하는 처음 두 가지 요소는 사용자가 컨트롤을 로드할 때 텍스트 색상, 배경 및 글리프를 변경합니다.
이제 응용 프로그램을 실행하면 React AutoComplete 컨트롤이 약간 바뀐 것을 알 수 있습니다.
보시다시피 다크 모드의 느낌이 더 많이 납니다. 다음으로 드롭다운이 컨트롤의 텍스트 부분과 일치하는지 확인해야 합니다. 우리가 작성한 CSS의 나머지 부분이 바로 이 역할을 할 것입니다! CSS 파일은 AutoComplete 컨트롤의 드롭다운 부분에 대한 배경, 텍스트 색상 및 마우스로 가리키기 효과를 변경합니다. 이 응용 프로그램을 실행하면 다음과 같이 표시되어야 합니다.
보시다시피 이제 배경색이 전체 컨트롤에서 일치하고 강조 표시 색상이 멋지게 적용되어 선택한/마우스로 가리킨 부분과 목록의 나머지 요소가 구분됩니다.
결론
지금까지 살펴본 것처럼 Wijmo의 React AutoComplete 컨트롤을 사용하면 검색 기능을 쉽게 포함할 수 있습니다. 더 많은 정보를 위해 개발자를 위한 , 및 가 준비되어 있습니다. 완성된 응용 프로그램을 다운로드하려면 에서 찾을 수 있습니다.
Wijmo에서 제공하는 더 많은 사항에 관심이 있다면 통해 라이브러리를 다운로드할 수 있습니다. 응용 프로그램을 빌드할 때 사용할 수 있는 수백 가지 샘플 및 참조 앱이 들어 있습니다.
지금 바로 Wijmo를 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.
