ACE1.0动态搜索框OpenHarmony组件开发大赛参与组件-Search

前言

前段时间参与了鸿蒙ACE1.0的组件开发者大赛，
大赛参与地址：
https://gitee.com/gitee-community/openharmony_components
大赛组件地址：
https://gitee.com/gitee-community/openharmony_components/issues
我也积极参与了一下，开发了一个search_dialog，是一个实用且能过滤关键字变色的搜索框，除了提供了基本的搜索框能力以外，被搜索到的列表中的关键字能变色，提高了识别能力，也提高了用户体验，既能加载本地数据，也能加载网络数据，皆可通过关键字过滤数据。非常实用，爆赞！！！
我的参赛作品发布地址：
https://gitee.com/gitee-community/openharmony_components/issues/I4ARAL?from=project-issue
个人组件仓库地址：
https://gitee.com/feishen98/search-dialog-js

上图

核心实现介绍

1，核心点之一：就是如何使列表中的单词单独变红色。
将列表的每一个item中字体的显示以单独的组件进行合并拼接。也就是说如果是：Tom这个词，我需要组件分别拆分成三个显示Tom,而且各自有自己color颜色，但是一个一个添加太麻烦因此使用for循环,并且各自赋值颜色值。

<div id="textDiv" class="div-text" for="{{ (index, val) in value.list }}"><text style="font-size : 16px;height : 100%;align-content : space-between;color:{{val.isRed}};">{{ val.str }}</text></div>

2，核心点之二：如何进行数据过滤。
首先把拿到list数据单个item字符串，每个字符串都打散成一个数组集合。

//拿到originalList数据后，初始化数据initData() {const changeArr = new Array((this.originalList.length))for (var index = 0; index < this.originalList.length; index++) {const element = this.originalList[index];const bean = new ChangeList()bean.id = element.idbean.isShow = this.isShowIconbean.imgUrl = element.imgUrlbean.content = element.contentconst newArr = new Array((element.content.length))for (var j = 0; j < element.content.length; j++) {const ele = element.content.charAt(j);var strBean = new ChangeStrList()strBean.str = ele;strBean.isRed = '#222222';newArr[j] = strBean;}bean.list = newArrchangeArr[index] = bean}this.changeList = changeArrthis.initDataList = changeArr //保留一份初始化后的数据},

然后通过search输入框的监听，拿到Key值后，再于初始化好的数据进行筛选。

 //筛选数据输入keyfilterData() {//更新数据this.updateData()//key中字符能够包含的const keyContainsArr = new Array();for (var index = 0; index < this.initDataList.length; index++) {const element = this.initDataList[index];for (var i = 0; i < this.key.length; i++) {const keyChar = this.key.charAt(i);for (var j = 0; j < element.list.length; j++) {const ele = element.list[j];if (keyChar == ele.str) {ele.isRed = '#ff0000'if (keyContainsArr.length>0) {var pos = -1;for (var t = 0; t < keyContainsArr.length; t++) {var keyTele = keyContainsArr[t];if (keyTele.id==element.id) {pos = t}}if(pos !=-1){keyContainsArr[pos] = element}else{keyContainsArr.push(element)}}else{keyContainsArr.push(element)}break}}}}//去重
//        this.changeList = Array.from(new Set(keyContainsArr))this.changeList = keyContainsArr//避免搜索延迟导致数据为空if (this.key.length == 0) {this.changeList = this.initDataList}},

用法

将pages下index文件夹，拷贝到自己项目中并修改文件名字，然后通过import导入js即可使用了 1，给js中的originalList按照对应的数据结构赋值对应数据 2，根据对应的需要，按照如下赋值：

//普通列表搜索框
showDialog1(e) {
this.isShowIcon = false
this.loadingStyle =‘loading’
this.isShowLoading = false
this.initData()
this.KaTeX parse error: Expected 'EOF', got '}' at position 30: …g').show() }̲ //Logo列表搜索框 …element(‘dialog’).show()
}
//网络加载搜索框
showDialog3(e) {
this.isShowIcon = true;
this.isShowLoading = true
this.initData()
this.$element(‘dialog’).show()
}
//网络数据需要特别处理，就是在
//数据处理
onDataHandle() {
……
if (this.isShowLoading) {
this.loadingStyle =‘loadingShow’ //请求前
//这里可以做网络请求，拿到数据后
that.loadingStyle =‘loading’ //请求完成后
//先给this.originalList = … 赋值，然后在调用一次初始化数据调用这个方法：this.initData()，
//最后再调用 that.filterData()方法后，就完成了过滤并显示出列表了了
}
}
由此便可完成使用，详情请看index.js的code
组件地址：
https://gitee.com/feishen98/search-dialog-js/tree/master

ACE1.0动态搜索框OpenHarmony组件开发大赛参与组件-Search_DialogJS相关推荐

用HTML、CSS写一个酷炫的动态搜索框
用HTML.CSS写一个酷炫的动态搜索框可伸展的动态搜索框! 复制粘贴即可用! HTML部分: <!DOCTYPE html> <html lang="en"& ...
自定义组件开发六自定义组件
概述 Android SDK 为我们提供了一套完整的组件库,数量多.功能强,涉及到方方面面,但是,我们依然看到软件市场上的每个 App 都有自己独特的东西,绝不是千遍一律的,而且也会和 IOS相互借鉴 ...
Vue 组件开发 - 数据输入框组件
目录设计通用组件的一般思路组件效果 1. HTML结构 2. index.js 3. input-number.js 3.1 input-number.js代码注解设计通用组件的一般思路明确需 ...
web前端组件开发之弹窗组件实现
widget 抽象类首先抽象出弹窗组件的一些共有属性和方法. widget抽象类中定义一个最外层容器,即整个弹窗,在widget构造函数中,添加一个属性: this.boundingBox = n ...
vue 刷新echarts_用Vue开发动态刷新Echarts组件（以及修改时遇到的问题）
通过这篇文章我学习了vue集成echarts,尝试了一下demo没问题,但是在修改我预期效果时,却出了一点问题,最后解决思路见最后从几年前流行的jQuery插件,到现在React和Vue的组件,在业 ...
Android常用：手把手教你实现搜索框（含历史搜索记录）
http://blog.csdn.net/carson_ho/article/details/53366570 前言像下图的搜索功能在Android开发中非常常见今天我将手把手教大家如何实现具备历 ...
一分钟带你了解Huawei LiteOS组件开发指南
摘要:本文将基于Huawei LiteOS系统,从组件定义开始带你走进组件开发指南. 本文分享自华为云社区<一分钟带你了解Huawei LiteOS之组件开发指南>,作者: Lionlac ...
uni-app使用map组件开发map地图，获取后台返回经纬度进行标点
unia-pp实现map组件,获取后台返回经纬度进行标点官方文档使用步骤代码示例官方文档使用步骤使用uniapp是因为它是一个使用vue.js开发所有前端应用的框架,开发者编写一套代码,可以发 ...
仿百度搜索框–jQuery版本
仿百度搜索框–jQuery版本时维九月,序属三秋.此吾工作三个月之日,亦是吾重拾博客之时.一路坎坷走来,经历良多,收获甚多. 正题百度搜索框是企业开发中常用的一项功能,作为一个前端工作者,自然也是 ...

ACE1.0动态搜索框OpenHarmony组件开发大赛参与组件-Search_DialogJS

前言

上图

核心实现介绍

用法

ACE1.0动态搜索框OpenHarmony组件开发大赛参与组件-Search_DialogJS相关推荐

最新文章

热门文章