index.tsx 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. import React, { useEffect, useState } from 'react';
  2. import styles from './index.less';
  3. import { Select } from 'antd';
  4. //import { mapListData } from '@/hooks/useMapList';
  5. import { SearchOutlined } from '@ant-design/icons';
  6. import { useModel } from 'umi';
  7. type mapResType = {
  8. text: string;
  9. value: string;
  10. };
  11. const { Option } = Select;
  12. type SearchInputProps = {
  13. onSearch: (s: string) => void;
  14. mapList: API.MapInfo[];
  15. };
  16. const SearchInput: React.FC<SearchInputProps> = ({ onSearch, mapList }) => {
  17. const [matchData, setMatchData] = useState<mapResType[]>([]);
  18. const [value, setValue] = useState<any>();
  19. // const { mapList } = useModel('map');
  20. //这是搜索 的下拉列表的显示
  21. const handleSearch = (value: string) => {
  22. //debugger;
  23. if (value) {
  24. let data: mapResType[] = [];
  25. mapList.map((item, index) => {
  26. if ((item.localName || '').indexOf(value) > -1) {
  27. data.push({
  28. text: item.localName,
  29. value: item.localName,
  30. });
  31. }
  32. });
  33. setMatchData(data);
  34. console.log('search', data);
  35. } else {
  36. setMatchData([]);
  37. }
  38. };
  39. //这是搜索的下拉列表的点击
  40. const handleChange = (sel: string) => {
  41. //debugger;
  42. setValue(null); //清空输入的值
  43. setMatchData([]); //清空搜索匹配列表
  44. onSearch(sel);
  45. };
  46. const handelInputKeyDown = (e) => {
  47. // 如果点击回车的操作
  48. console.log('keydown', matchData);
  49. if (e.code == 'Enter') {
  50. if (matchData.length == 1) {
  51. onSearch(matchData[0].text);
  52. }
  53. }
  54. };
  55. return (
  56. <div className={styles.headerSearch}>
  57. <SearchOutlined style={{ fontSize: 16 }} />
  58. <Select
  59. showSearch
  60. value={value}
  61. placeholder="搜索空间"
  62. defaultActiveFirstOption={false}
  63. showArrow={false}
  64. filterOption={false}
  65. onSearch={handleSearch}
  66. onChange={handleChange}
  67. onInputKeyDown={handelInputKeyDown}
  68. notFoundContent={null}
  69. bordered={false}
  70. style={{ width: 150, borderColor: '#c4c4c4' }}
  71. // suffixIcon={
  72. // <AudioOutlined
  73. // style={{
  74. // fontSize: 16,
  75. // color: '#1890ff',
  76. // }}
  77. // />
  78. // }
  79. >
  80. {matchData.map(function (item, index) {
  81. return <Option key={item.value}>{item.text}</Option>;
  82. })}
  83. </Select>
  84. </div>
  85. );
  86. };
  87. export default SearchInput;