add search for select into LinkedItems component

src/components/LinkedItems.tsx

@@ -1,5 +1,5 @@
 import {useState, useEffect} from 'react'
-import {Stack, Typography, Button, MenuItem, Select, FormControl, InputLabel, Grid, Box, Accordion, AccordionSummary, AccordionDetails, useTheme, TextField} from '@mui/material'
+import {Stack, Typography, Button, FormControl, Grid, Box, Accordion, AccordionSummary, AccordionDetails, useTheme, TextField, Autocomplete} from '@mui/material'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import axios from 'axios'
 import {BACKEND_URL} from '../lib/constants'
@@ -172,17 +172,18 @@ export const LinkedItems = <T extends {id: number; [key: string]: any}>({parentI
           {type === 'edit' && (
             <Stack gap={2}>
               <Typography variant="subtitle1">Добавить {title}</Typography>
-              <FormControl fullWidth>
-                <InputLabel>Выберите {title}</InputLabel>
-                <Select value={selectedItemId || ''} onChange={(e) => setSelectedItemId(e.target.value as number)} label={`Выберите ${title}`}>
-                  {availableItems.map((item) => (
-                    <MenuItem key={item.id} value={item.id}>
-                      {/* {fields.map((field) => item[field.data]).join(' - ')} */}
-                      {item[fields[0].data]}
-                    </MenuItem>
-                  ))}
-                </Select>
-              </FormControl>
+              <Autocomplete
+                fullWidth
+                value={availableItems.find((item) => item.id === selectedItemId) || null}
+                onChange={(_, newValue) => setSelectedItemId(newValue?.id || null)}
+                options={availableItems}
+                getOptionLabel={(item) => String(item[fields[0].data])}
+                renderInput={(params) => <TextField {...params} label={`Выберите ${title}`} fullWidth />}
+                isOptionEqualToValue={(option, value) => option.id === value?.id}
+                filterOptions={(options, {inputValue}) => {
+                  return options.filter((option) => String(option[fields[0].data]).toLowerCase().startsWith(inputValue.toLowerCase()))
+                }}
+              />
 
               {childResource === 'article' && (
                 <FormControl fullWidth>