很多app 中都有搜索功能的需求，如社交类app中的搜索好友功能，购物类app中的搜索商品等功能，本文介绍如何使用 AVM 多端组件快速实现搜索功能。
多端组件是指使用 avm.js 开发的组件,通常同时适配Android、iOS、小程序、H5 , 具体支持情况还要看每个组件的说明文档。
首先在 千语创想 模块库中搜索 animate-UISearchBar模块，然后将其添加到项目。多端组件需要下载源码，引入到项目使用，不可以单独使用。
animate-UISearchBar 具有如下功能：
搜索占位提示语（占位符就是先占住一个固定的位置，等着用户向里面输入内容的符号，可以使用户清楚地看到即将输入的文字会在哪个位置出现）
搜索记录（可以显示用户之前搜索过的内容，方便再次搜索）
清除搜索记录（隐藏个人隐私）
搜索触发事件（点击后就会进行搜索）
取消搜索事件
并且可以使用css自定义样式，随心所欲地设计自己喜欢的搜索按钮。
下载后解压的组件目录如下图：
其中的animate-UISearchBar.stml就是我们要用的组件文件，我们需要将其放到自己项目的components目录下，如图：
在把组件放到项目目录后，千万不要忘记写引用语句，否则组件就无法成功使用了。在以后的使用过程中，其他组件也都可以用这种方式引入到项目里，使用起来方便快捷。
引用语句为：
import "../components/animate-UISearchBar/animate-UISearchBar.stml";
搜索功能组件的运行效果如下图：
大家也可以根据自己的喜好，做出更美观的搜索样式。
通过以上过程，可以看到使用组件方便快捷，可以提高项目开发效率，无需我们再自己编写搜索功能的代码，此外，AVM还为我们提供了功能丰富的多端组件，并且多数也都可以根据自己的喜好进行调整，熟练地使用AVM多端组件可以大幅度地提高项目开发效率。
如果对怎样添加模块，调试模块还不太熟悉，可参考以下文档：
模块使用教程：https://www.csdn.net/article/2022-01-26/122697219
Studio 3 教程文档：https://docs.qianyuthink.com/qianyuthink3/#/overview/devtools?index=0&subIndex=3
Studio 3 真机调试文档：https://docs.qianyuthink.com/Dev-Tools/studio3-wifi-debug
千语创想的模块商城和多端组件可帮助开发者快速实现业务需求,非常适合刚接触低代码开发平台的开发者,感兴趣的小伙伴可以多多来学习尝试下～
立即免费在线制作一个APP，新手注册即送开发大礼包
提交app定制需求，免费获取报价和周期：
电脑请点击https://www.qianyuthink.com/?url=/index?uzchannel=500
手机请点击https://www.qianyuthink.com/?url=/m/quickaddcustom
