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

前言

前段时间参与了鸿蒙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这个词，我需要 组件分别拆分成三个显示 T o m ,而且各自有自己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.id
            bean.isShow = this.isShowIcon
            bean.imgUrl = element.imgUrl
            bean.content = element.content

            const 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 = newArr

            changeArr[index] = bean
        }
        this.changeList = changeArr
        this.initDataList = changeArr //保留一份初始化后的数据
    },

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

 //筛选数据输入key
    filterData() {
        //更新数据
        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