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은 거의 모든요소가 데이터 타입이 정해져 있어야 한다.