replace the search bar with auto complete

bldrs-ai · Oct 7, 2023 · a409611 · a409611
1 parent 33ca71b
commit a409611
Showing 1 changed file with 34 additions and 27 deletions.
diff --git a/src/Components/SearchBar.jsx b/src/Components/SearchBar.jsx
@@ -1,6 +1,7 @@
 import React, {useRef, useEffect, useState} from 'react'
 import {useLocation, useNavigate, useSearchParams} from 'react-router-dom'
 import InputAdornment from '@mui/material/InputAdornment'
+import Autocomplete from '@mui/material/Autocomplete'
 import IconButton from '@mui/material/IconButton'
 import TextField from '@mui/material/TextField'
 import {looksLikeLink, githubUrlOrPathToSharePath} from '../ShareRoutes'
@@ -23,7 +24,6 @@ export default function SearchBar({fileOpen}) {
   const [searchParams, setSearchParams] = useSearchParams()
   const [inputText, setInputText] = useState('')
   const [error, setError] = useState('')
-  const onInputChange = (event) => setInputText(event.target.value)
   const searchInputRef = useRef(null)
 
 
@@ -83,42 +83,49 @@ export default function SearchBar({fileOpen}) {
   // to have them share the same width, which is now set in the parent
   // container (CadView).
   return (
-    <form
-      onSubmit={onSubmit}
-    >
-      <TextField
-        inputRef={searchInputRef}
+    <form onSubmit={onSubmit}>
+      <Autocomplete
+        fullWidth
+        freeSolo
+        options={['together', 'dach', 'fen', 'wand']}
         value={inputText}
-        size='small'
-        onChange={onInputChange}
-        onSubmit={onSubmit}
-        error={!!error.length} // True if there's an error message
-        fullWidth={true}
-        placeholder={'Search'}
-        variant="outlined"
-        sx={{width: '275px'}}
-        InputProps={{
-          startAdornment: (
-            <InputAdornment position="start">
-              <SearchIcon sx={{opacity: .5}} color='secondary'/>
-            </InputAdornment>
-          ),
-          endAdornment: inputText.length > 0 ? (
-                <InputAdornment position="end" >
+        onChange={(_, newValue) => setInputText(newValue || '')}
+        onInputChange={(_, newInputValue) => setInputText(newInputValue || '')}
+        inputValue={inputText}
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            inputRef={searchInputRef}
+            size="small"
+            error={!!error.length}
+            placeholder="Search"
+            variant="outlined"
+            sx={{width: '275px', height: '50px'}}
+            InputProps={{
+              ...params.InputProps,
+              startAdornment: (
+                <InputAdornment position="start">
+                  <SearchIcon sx={{opacity: 0.5}} color="secondary"/>
+                </InputAdornment>
+              ),
+              endAdornment: inputText.length > 0 ? (
+                <InputAdornment position="end">
                   <IconButton
-                    size='small'
+                    size="small"
                     onClick={() => {
                       setInputText('')
                       setError('')
                       navWithSearchParamRemoved(navigate, location.pathname, QUERY_PARAM)
                     }}
-                    style={{padding: 0, opacity: .5}}
+                    style={{padding: 0, opacity: 0.5}}
                   >
-                    <HighlightOffIcon className='icon-share' size='inherit' color='secondary'/>
+                    <HighlightOffIcon className="icon-share" size="inherit" color="secondary"/>
                   </IconButton>
                 </InputAdornment>
-            ) : null,
-        }}
+              ) : null,
+            }}
+          />
+        )}
       />
     </form>
   )