LiveSearchSelect.jsx

Go to the documentation of this file.

// Simple live search select component for large lists
 
import { useState, useEffect } from 'react';
import { apiFetch } from '../lib/api';
 
export default function LiveSearchSelect({ options, value, onChange, placeholder, labelKey = 'name', valueKey = 'id', disabled, resetSearch }) {
  const [search, setSearch] = useState('');
 
  useEffect(() => {
    if (resetSearch) setSearch('');
  }, [resetSearch]);
 
  const filtered = Array.isArray(options)
    ? options.filter(opt =>
        (opt[labelKey] || '').toString().toLowerCase().includes(search.toLowerCase())
      )
    : [];
 
  return (
    <div style={{ position: 'relative' }}>
      <input
        type="text"
        value={search}
        onChange={e => setSearch(e.target.value)}
        placeholder={placeholder || 'Search...'}
        style={{ width: '100%', marginBottom: 4, padding: 6, borderRadius: 4, border: '1px solid #ccc', fontSize: 14 }}
        disabled={disabled}
      />
      <select
        value={value}
        onChange={e => onChange(e.target.value)}
        style={{ width: '100%', padding: 6, borderRadius: 4, border: '1px solid #ccc', fontSize: 14 }}
        disabled={disabled}
      >
        <option value="">Select...</option>
        {filtered.map(opt => (
          <option key={opt[valueKey]} value={opt[valueKey]}>{opt[labelKey]}</option>
        ))}
      </select>
    </div>
  );
}