12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091 |
- import React, { useEffect, useState } from 'react';
- import styles from './index.less';
- import { Select } from 'antd';
- //import { mapListData } from '@/hooks/useMapList';
- import { SearchOutlined } from '@ant-design/icons';
- import { useModel } from 'umi';
- type mapResType = {
- text: string;
- value: string;
- };
- const { Option } = Select;
- type SearchInputProps = {
- onSearch: (s: string) => void;
- mapList: API.MapInfo[];
- };
- const SearchInput: React.FC<SearchInputProps> = ({ onSearch, mapList }) => {
- const [matchData, setMatchData] = useState<mapResType[]>([]);
- const [value, setValue] = useState<any>();
- // const { mapList } = useModel('map');
- //这是搜索 的下拉列表的显示
- const handleSearch = (value: string) => {
- //debugger;
- if (value) {
- let data: mapResType[] = [];
- mapList.map((item, index) => {
- if ((item.localName || '').indexOf(value) > -1) {
- data.push({
- text: item.localName,
- value: item.localName,
- });
- }
- });
- setMatchData(data);
- console.log('search', data);
- } else {
- setMatchData([]);
- }
- };
- //这是搜索的下拉列表的点击
- const handleChange = (sel: string) => {
- //debugger;
- setValue(null); //清空输入的值
- setMatchData([]); //清空搜索匹配列表
- onSearch(sel);
- };
- const handelInputKeyDown = (e) => {
- // 如果点击回车的操作
- console.log('keydown', matchData);
- if (e.code == 'Enter') {
- if (matchData.length == 1) {
- onSearch(matchData[0].text);
- }
- }
- };
- return (
- <div className={styles.headerSearch}>
- <SearchOutlined style={{ fontSize: 16 }} />
- <Select
- showSearch
- value={value}
- placeholder="搜索空间"
- defaultActiveFirstOption={false}
- showArrow={false}
- filterOption={false}
- onSearch={handleSearch}
- onChange={handleChange}
- onInputKeyDown={handelInputKeyDown}
- notFoundContent={null}
- bordered={false}
- style={{ width: 150, borderColor: '#c4c4c4' }}
- // suffixIcon={
- // <AudioOutlined
- // style={{
- // fontSize: 16,
- // color: '#1890ff',
- // }}
- // />
- // }
- >
- {matchData.map(function (item, index) {
- return <Option key={item.value}>{item.text}</Option>;
- })}
- </Select>
- </div>
- );
- };
- export default SearchInput;
|