收起
自动换行
深色代码主题
复制
List() {
  ForEach(this.filteredSuggestions, (item: string) => {
    ListItem() {
      Text(item)
        .width('100%')
        .height(50)
        .fontSize(18)
        .textAlign(TextAlign.Start)
        .padding({ left: 15 })
    }
    .onClick(() => {
       // 未设置标志位，表示本次填充为自动填充
      this.controller.deleteText();
      this.controller.addText(item);
      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 })

分析结论

点击搜索建议，自动填充进搜索框后，仍将该自动填充判断为用户输入，再次对该输入进行了匹配搜索，因此展示了同样的搜索建议。

修改建议

在点击搜索建议后，在注释位置设置标志位，表示本次填充为自动填充：

收起
自动换行
深色代码主题
复制
@Entry
@Component
struct Input {
  private controller: TextInputController = new TextInputController();
  @State inputText: string = '';
  @State filteredSuggestions: string[] = [];
  @State showSuggestions: boolean = false;
  private isProgrammaticChange: boolean = false;

  private suggestions: string[] = ['Apple', 'Banana', 'Cherry'];

  build() {
    Column() {
      TextInput({ controller: this.controller , placeholder:'请输入水果名称'})
        .width('90%')
        .height(40)
        .onChange((value: string) => {
          if (this.isProgrammaticChange) {
            this.isProgrammaticChange = false;
            return;
          }

          this.inputText = value;
          if (value.length > 0) {
            this.filterSuggestions();
          } else {
            this.showSuggestions = false;
          }
        })

      if (this.showSuggestions && this.filteredSuggestions.length > 0) {
        List() {
          ForEach(this.filteredSuggestions, (item: string) => {
            ListItem() {
              Text(item)
                .fontSize(16)
                .padding(10)
            }
            .onClick(() => {
              this.isProgrammaticChange = true;
              this.controller.deleteText();
              this.controller.addText(item);
              this.controller.caretPosition(item.length);
              this.showSuggestions = false;
            })
          })
        }
        .width('90%')
        .border({ width: 1, color: '#ccc' })
        .backgroundColor(Color.White)
      }
    }
    .width('100%')
    .padding(20)
  }

  private filterSuggestions() {
    const input = this.inputText.toLowerCase();
    this.filteredSuggestions = this.suggestions.filter(item =>
    item.toLowerCase().startsWith(input)
    );
    this.showSuggestions = this.filteredSuggestions.length > 0;
  }
}

点击验证码输入框拉起软键盘后需要切换到数字输入模式

标题栏与底部的列表条目无法一起滑动

意见反馈

以上内容对您是否有帮助？

意见反馈

如果您有其他疑问，您也可以通过开发者社区问答频道来和我们联系探讨。

社区提问智能客服提问