1월달 작업 -검색기능
검색기능 구조
// 검색 기능 필터 기능
/ 검색기능
const [filterList, setFilterList] = useState<any>();
// [selectAsset, setSelectAsset] = useState<string>();
const filterText = (txt: string) => {
setAssetItems([]);
closePopup();
const searchList: {
device_eui: string;
asset_id: string;
vms_id: string;
}[] = [];
deviceState.recItems?.device_list.forEach(itm => {
if (itm.device_eui.match(txt)) {
searchList.push({
device_eui: itm.device_eui,
vms_id: itm.vms_id,
asset_id: itm.asset_id,
});
}
if (itm.vms_id.match(txt)) {
searchList.push({
device_eui: itm.device_eui,
vms_id: itm.vms_id,
asset_id: itm.asset_id,
});
}
if (itm.site_name.toUpperCase().match(txt.toUpperCase())) {
searchList.push({
device_eui: itm.device_eui,
vms_id: itm.vms_id,
asset_id: itm.asset_id,
});
}
});
setFilterList(searchList);
};
return(
{showSearchModal ? (
<SearchModal
filterList={filterList}
onSearchKeyword={(keyword: string) => filterText(keyword)}
allDevList={allDeviceList}
handleEvent={async (data: {
asset_id: string;
'': string;
}) => {
const fid = `asset_view.${data.asset_id}`;
updateDeviceDetail(
data.asset_id,
`${userUid}`
).then(() => {});
openPopup(`asset_view.${data.asset_id}`);
const result = await gis.setSelectedAsset(
`innodep:asset_view`,
[fid]
);
moveLocation(
result[0].info.values_.geometry.flatCoordinates[0],
result[0].info.values_.geometry.flatCoordinates[1],
17
);
}}
/>
) : null}
)
검색 방식은 "입력된 검색어"와 "기존의 데이터 배열요소"간의 비교를 통해 일치하는 것이 있는지 확인하는 것임. 만약 부분일치라도 되는 것이 있으면 변수(배열형태)에다가 추가를 한다. 그리고 이 변수배열을 화면에 나타내면 된다.
match 메소드
variable.match(text)
variable문자열에 text와 같은 대상이 있는지 없는지 체크
handleEvent
자식요소에서 부모요소 방향으로 역방향으로 작동하는 함수.
Typescript은 거의 모든요소가 데이터 타입이 정해져 있어야 한다.
Author And Source
이 문제에 관하여(1월달 작업 -검색기능), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@arin00pro/1월달-작업-검색기능저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)