diff --git a/examples/infinity-scrolling/main.go b/examples/infinity-scrolling/main.go
index f2b4b43..1cbf9cf 100644
--- a/examples/infinity-scrolling/main.go
+++ b/examples/infinity-scrolling/main.go
@@ -21,12 +21,12 @@ func NewInfinityListPage() (admin.Pager, error) {
 			Type:      admin.InfinityListPage,
 		},
 		Form: admin.Form{
-			ID: "Text",
+			ID: "Autocomplete",
 			Fields: admin.Fields{
 				admin.Field{
-					ID:         "Text",
-					Type:       admin.InputText,
-					Label:      "Text ...",
+					ID:         "Autocomplete",
+					Type:       admin.InputAutocomplete,
+					Label:      "Autocomplete...",
 					IsRequired: true,
 					Value:      "",
 					FullWidth:  true,
diff --git a/templates/materialUI.tsx b/templates/materialUI.tsx
index d58c441..809e696 100644
--- a/templates/materialUI.tsx
+++ b/templates/materialUI.tsx
@@ -4,6 +4,7 @@ const {
   Avatar,
   colors,
   CssBaseline,
+  CircularProgress,
   ThemeProvider,
   Typography,
   Container,
@@ -60,12 +61,14 @@ const {
   OutlinedInput,
   FormControl,
   InputLabel,
-  InputAdornment
+  InputAdornment,
+  Autocomplete
 } = MaterialUI;
 
 const {
   useState,
-  useEffect
+  useEffect,
+  Fragment
 } = React;
 
 const {
@@ -1829,8 +1832,8 @@ function [[ .ID ]]Upload({ appState, handleClearAppState, handleSetAppState }) {
 [[end]]
 
 [[define "InfinityList"]]
-[[ $inputAutocompleteType := .inputTypes.inputAutocomplete ]]
 [[ $inputTextType := .inputTypes.inputText ]]
+[[ $inputAutocompleteType := .inputTypes.inputAutocomplete ]]
 [[ with .page ]]
 function [[ .ID ]]InfinityList({ handleSetAppState }) {
   const history = useHistory();
@@ -1922,7 +1925,10 @@ function [[ .ID ]]InfinityList({ handleSetAppState }) {
                 [[ if eq $field.Type $inputTextType ]]
                     [[ template "TextField" (Wrap $field.ID $field.Label $field.IsRequired $field.Value $field.FullWidth $field.IsMultiline $field.NumberOfRows) ]]
             	  [[ end ]]
-            	[[ end ]]
+                [[ if eq $field.Type $inputAutocompleteType ]]
+                    [[ template "AutocompleteField" (Wrap $field.ID $field.Label $field.IsRequired $field.Value $field.FullWidth $field.IsMultiline $field.NumberOfRows) ]]
+                [[ end ]]
+              [[ end ]]
             {/*<FormControlLabel
               control={<Checkbox value="remember" color="primary" />}
               label="Remember me"
@@ -2180,6 +2186,36 @@ function [[ .ID ]]SideForm({ handleSetAppState }) {
 </FormGroup>
 [[end]]
 
+[[define "AutocompleteField"]]
+<Autocomplete
+  sx={{ width: 300 }}
+  open={ open }
+  onOpen={ handleOpen }
+  onClose={ handleClose }
+  isOptionEqualToValue={(option, value) => option.title === value.title}
+  getOptionLabel={(option) => option.title}
+  options={ options }
+  loading={ loading }
+  renderInput={(params) => (
+    <TextField
+      {...params}
+      label="Asynchronous"
+      slotProps={{
+        input: {
+          ...params.InputProps,
+          endAdornment: (
+            <Fragment>
+              {loading ? <CircularProgress color="inherit" size={20} /> : null}
+              {params.InputProps.endAdornment}
+            </Fragment>
+          ),
+        },
+      }}
+    />
+  )}
+/>
+[[end]]
+
 [[define "DefaultSelect"]]
 function DefaultSelect({ id, label, disabled, defaultValue, values = [] }) {
   const [val, setVal] = React.useState(defaultValue);