react实现搜索的select

React 实现搜索 Select 组件

使用原生 select 实现基础搜索

import React, { useState } from 'react';

function SearchSelect({ options }) {
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedOption, setSelectedOption] = useState('');

  const filteredOptions = options.filter(option =>
    option.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div>
      <input
        type="text"
        placeholder="Search..."
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      <select
        value={selectedOption}
        onChange={(e) => setSelectedOption(e.target.value)}
      >
        <option value="">Select an option</option>
        {filteredOptions.map((option, index) => (
          <option key={index} value={option}>
            {option}
          </option>
        ))}
      </select>
    </div>
  );
}

使用第三方库 react-select

安装 react-select 库：

npm install react-select

实现代码：

import React, { useState } from 'react';
import Select from 'react-select';

function SearchableSelect({ options }) {
  const [selectedOption, setSelectedOption] = useState(null);

  return (
    <Select
      value={selectedOption}
      onChange={setSelectedOption}
      options={options}
      isSearchable
      placeholder="Search..."
    />
  );
}

自定义搜索下拉组件

import React, { useState, useRef, useEffect } from 'react';

function CustomSearchSelect({ options }) {
  const [searchTerm, setSearchTerm] = useState('');
  const [isOpen, setIsOpen] = useState(false);
  const [selectedOption, setSelectedOption] = useState('');
  const dropdownRef = useRef(null);

  const filteredOptions = options.filter(option =>
    option.toLowerCase().includes(searchTerm.toLowerCase())
  );

  useEffect(() => {
    const handleClickOutside = (event) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
        setIsOpen(false);
      }
    };
    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);

  return (
    <div ref={dropdownRef} style={{ position: 'relative' }}>
      <input
        type="text"
        placeholder="Search..."
        value={isOpen ? searchTerm : selectedOption}
        onChange={(e) => setSearchTerm(e.target.value)}
        onFocus={() => setIsOpen(true)}
      />
      {isOpen && (
        <ul style={{
          position: 'absolute',
          top: '100%',
          left: 0,
          right: 0,
          zIndex: 1,
          border: '1px solid #ccc',
          maxHeight: '200px',
          overflowY: 'auto',
          backgroundColor: 'white'
        }}>
          {filteredOptions.map((option, index) => (
            <li
              key={index}
              style={{ padding: '8px', cursor: 'pointer' }}
              onClick={() => {
                setSelectedOption(option);
                setIsOpen(false);
              }}
            >
              {option}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

实现异步搜索

import React, { useState, useEffect } from 'react';
import Select from 'react-select';
import axios from 'axios';

function AsyncSearchSelect() {
  const [inputValue, setInputValue] = useState('');
  const [options, setOptions] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    if (inputValue) {
      setIsLoading(true);
      const timer = setTimeout(() => {
        axios.get(`https://api.example.com/search?q=${inputValue}`)
          .then(response => {
            setOptions(response.data.map(item => ({
              value: item.id,
              label: item.name
            })));
            setIsLoading(false);
          });
      }, 500);
      return () => clearTimeout(timer);
    }
  }, [inputValue]);

  return (
    <Select
      options={options}
      onInputChange={setInputValue}
      isLoading={isLoading}
      isSearchable
      placeholder="Search..."
    />
  );
}

多选搜索组件

import React, { useState } from 'react';
import Select from 'react-select';

function MultiSearchSelect() {
  const [selectedOptions, setSelectedOptions] = useState([]);
  const options = [
    { value: 'apple', label: 'Apple' },
    { value: 'banana', label: 'Banana' },
    { value: 'orange', label: 'Orange' }
  ];

  return (
    <Select
      isMulti
      value={selectedOptions}
      onChange={setSelectedOptions}
      options={options}
      isSearchable
      placeholder="Search and select multiple items..."
    />
  );
}

这些实现方式涵盖了从简单到复杂的各种搜索选择需求，可以根据项目需求选择合适的方案。react-select 提供了丰富的功能和定制选项，是大多数情况下的推荐选择。