Implement autocomplete lists for text input components. close #18

heinerwalter · Sep 18, 2024 · e98a9fc · e98a9fc
1 parent cea8fdb
commit e98a9fc
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 1 deletion.
diff --git a/projects/demo/src/app/components/all-inputs-demo/all-inputs-demo.component.html b/projects/demo/src/app/components/all-inputs-demo/all-inputs-demo.component.html
@@ -69,6 +69,16 @@ <h4>Text Input</h4>
   </pe-goto-icon>
 </p>
 
+<demo-input-demo-wrapper [value]="values.textAutocomplete"
+                         valueModifier="quotes">
+  <pe-text-input label="Text input with autocompletion"
+                 infoIconTooltip='Component: <pe-text-input [autocompleteList]="...">'
+                 [autocompleteList]="['Apple', 'Banana', 'Grape']"
+                 [(value)]="values.textAutocomplete"
+                 (valueChange)="onInputValueChange('textAutocomplete', $event)">
+  </pe-text-input>
+</demo-input-demo-wrapper>
+
 <demo-input-demo-wrapper [value]="values.textMultiLine"
                          valueModifier="quotes">
   <pe-text-area-input label="Multi line text input (textarea)"
@@ -352,7 +362,8 @@ <h4>Validation</h4>
   </pe-boolean-input>
 </demo-input-demo-wrapper>
 
-<demo-input-demo-wrapper [value]="values.text">
+<demo-input-demo-wrapper [value]="values.text"
+                         valueModifier="quotes">
   <pe-text-input label="Text input with validation"
                  infoIconTooltip='Component: <pe-text-input [isValid]="...">'
                  [(value)]="values.text"

diff --git a/projects/demo/src/app/components/all-inputs-demo/all-inputs-demo.component.ts b/projects/demo/src/app/components/all-inputs-demo/all-inputs-demo.component.ts
@@ -39,6 +39,7 @@ export class AllInputsDemoComponent {
     datetime: undefined as Date | undefined,
     number: undefined as number | undefined,
     text: '' as string | undefined,
+    textAutocomplete: '' as string | undefined,
     textMultiLine: '' as string | undefined,
     fileSingle: undefined as File[] | undefined,
     fileSingleContent: undefined as FileInputFileContentType | undefined,

diff --git a/projects/ngx-property-editor/src/lib/components/input/text-input/text-input.component.html b/projects/ngx-property-editor/src/lib/components/input/text-input/text-input.component.html
@@ -25,7 +25,12 @@
          [disabled]="disabled"
          [readonly]="readonly"
          [required]="required"
+         [attr.list]="autocompleteList?.length ? id + '-datalist' : ''"
          [(ngModel)]="value"
          (ngModelChange)="emitValueChange($event)"
          (change)="onChange()"/>
+  <datalist *ngIf="autocompleteList?.length"
+            [id]="id + '-datalist'">
+    <option *ngFor="let item of autocompleteList" [value]="item">
+  </datalist>
 </ng-template>
diff --git a/projects/ngx-property-editor/src/lib/components/input/text-input/text-input.component.ts b/projects/ngx-property-editor/src/lib/components/input/text-input/text-input.component.ts
@@ -30,6 +30,12 @@ export class TextInputComponent extends InputBaseWithValue<string> {
    */
   @Input() public trimValue: boolean = false;
 
+  /**
+   * If defined and not empty, a list with recommendations is displayed (similar to the select input)
+   * that can be used to fill the text input.
+   */
+  @Input() public autocompleteList: string[] | undefined = undefined;
+
   public constructor() {
     super();
   }