How to achieve auto-fill for text boxes

Read the original article：How to achieve auto-fill for text boxes

Requirement Description

The application must implement an auto-completion feature where entering a keyword displays a drop-down list of suggested items, and selecting an item from the list automatically fills the text box.

Background Knowledge

• TextInput is a single-line text input component.
• By entering keywords in a TextInput, a dropdown list can display suggestion items, and clicking a suggestion can auto-fill the input field.
• The onChange callback is triggered whenever the input content changes.

Implementation Steps

Core code logic:

• Use onChange to listen for text input changes and filter preset suggestion values.
• Use TextInputController to:
  • Programmatically update the input field with the selected suggestion
  • Close the dropdown list
  • Move the caret to the end of the text

Code Snippet / Configuration

@Entry
@Component
struct AutoComplete {
  @State private showSuggestions: boolean = false;
  private allSuggestions: string[] = ['Apple', 'Banana', 'Cherry', 'Lemon'];
  @State private filteredSuggestions: string[] = [];
  private isProgrammaticChange: boolean = false;
  private controller: TextInputController = new TextInputController();

  build() {
    Column() {
      TextInput({ placeholder: 'Please enter name...', controller: this.controller })
        .width('80%')
        .height(50)

        .fontSize(18)
        .margin({ top: 50 })
        .onChange((value: string) => {
          // Do not return without manual filling, avoid displaying the drop-down list multiple times
          if (this.isProgrammaticChange) {
            this.isProgrammaticChange = false;
            return;
          }
          // If the manually entered text quantity exceeds 0, filter the corresponding value
          if (value.length > 0) {
            this.filteredSuggestions = this.allSuggestions.filter(item =>
            item.toLowerCase().includes(value.toLowerCase())
            );
            this.showSuggestions = this.filteredSuggestions.length > 0;
          } else {
            this.showSuggestions = false;
          }
        })
      // Drop-down display box
      if (this.showSuggestions) {
        List() {
          ForEach(this.filteredSuggestions, (item: string) => {
            ListItem() {
              Text(item)
                .width('100%')
                .height(50)
                .fontSize(18)
                .textAlign(TextAlign.Start)
                .padding({ left: 15 })
            }
            .onClick(() => {
              this.isProgrammaticChange = true;
              this.controller.deleteText();
              this.controller.addText(item);
              this.showSuggestions = false;
              this.controller.caretPosition(item.length);
            })
          }, (item: string) => item)
        }
        .width('90%')
        .border({ width: 1, color: '#e0e0e0' })
        .borderRadius(8)
        .shadow({
          radius: 6,
          color: '#20000000',
          offsetX: 2,
          offsetY: 4
        })
        .margin({ top: 5 })
      }
    }
    .width('100%')
    .alignItems(HorizontalAlign.Center)
    .onClick(() => {
      this.showSuggestions = false;
    })
  }
}

Test Results

Limitations or Considerations

• This sample supports API Version 20 Release and above.
• This sample supports HarmonyOS 6.0.0 Release SDK and above.
• You must use DevEco Studio 6.0.0 Release or above for compilation.

Written by Muhammet Ali Ilgaz