TextInput录入查找关键字 选择HarmonyOS 鸿蒙Next数据

TextInput录入查找关键字 选择HarmonyOS 鸿蒙Next数据

TextInput可以录入数据，`select`可以选择数据，请问用什么组件，可以达到下图那样，录入查找，选择数据

![cke_1228.png](data-originheight="207" data-originwidth="172" src="https://alliance-communityfile-drcn.dbankcdn.com/FileServer/getFile/cmtybbs/025/069/393/0080086000025069393.20240112115502.13091045825605792898327870767914:50001231000000:2800:47B5F2BB9FB84EBB4F8CAEAA3BE7FA277A17780763D2919656896C3C347974D1.png)

更多关于TextInput录入查找关键字 选择HarmonyOS 鸿蒙Next数据的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

意思是在下面再加个组件，根据Textinput的内容查询显示出来，然后点选时进入Textinput组件内，是这样的思路吗？

更多关于TextInput录入查找关键字 选择HarmonyOS 鸿蒙Next数据的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这种都是自己写的，跟android 一样。下面是个列表(或者Menu 类似android Popupmenu)，边输入边查询，

找HarmonyOS工作还需要会Flutter的哦，有需要Flutter教程的可以学学大地老师的教程，很不错，B站免费学的哦：https://www.bilibili.com/video/BV1S4411E7LY/?p=17

意思是在下面再加个组件，根据Textinput的内容查询显示出来，然后点选时进入Textinput组件内，是这样的思路吗？

在HarmonyOS中，TextInput组件用于用户输入文本信息。要实现查找关键字功能，可以通过监听TextInput的输入事件，实时获取用户输入的内容，并与目标数据进行匹配。以下是一个简单的实现思路：

  1. 创建TextInput组件：在UI布局中定义TextInput组件，用于接收用户输入。

  2. 监听输入事件：通过onChange事件监听用户输入，实时获取输入框中的文本内容。

  3. 匹配关键字：将用户输入的内容与预定义的数据集进行匹配，筛选出包含关键字的项。

  4. 显示匹配结果：将匹配到的结果显示在UI中，例如使用List组件展示。

以下是一个简化的代码示例：

@Entry
@Component
struct SearchPage {
  @State inputText: string = '';
  @State searchResults: string[] = [];

  private dataSet: string[] = ['HarmonyOS', '鸿蒙Next', '开发者', '应用开发', '分布式'];

  build() {
    Column() {
      TextInput({ placeholder: '请输入关键字' })
        .onChange((value: string) => {
          this.inputText = value;
          this.searchResults = this.dataSet.filter(item => item.includes(value));
        })

      List({ space: 10 }) {
        ForEach(this.searchResults, (item: string) => {
          ListItem() {
            Text(item).fontSize(18)
          }
        })
      }
    }
  }
}

在这个示例中，TextInput组件用于接收用户输入，onChange事件监听输入变化，dataSet是预定义的数据集，searchResults用于存储匹配到的结果，并通过List组件展示。

通过这种方式，你可以实现一个简单的关键字查找功能，适用于HarmonyOS应用开发。

回到顶部