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

좋은 웹페이지 즐겨찾기