avm-zy-auto-complete

介绍

搜索输入框自动补全、搜索历史记录组件，比原生更好用的原生组件，样式美观，简单好用，非常方便集成。 开发时请将asset 下图片/视频等多媒体资源拷贝至widget的image目录

使用方式

import "../../components/avm-zy-auto-complete/avm-zy-auto-complete.stml";

代码示例

<scroll-view v-if="showzyAutoComplete" style="max-height:400px;">
    <avm-zy-auto-complete :key="autoCompleteKey" :value="searchValue" @event="zyAutoCompleteEvent"></avm-zy-auto-complete>
</scroll-view>

API

props 属性

参数 说明 类型 默认
key 组件唯一key String 无
value 内容 String 无

Events事件

事件名称 说明 回调参数
event 点击按键时触发 {"type":"cleanSingle","value":""}

案例

<script>
import "../../components/avm-zy-auto-complete/avm-zy-auto-complete.stml";
export default {
    name: "tpl",
    apiready() {
        
        //增加自动补全示例数据
        if(!api.getPrefs({ sync: true, key:this.autoCompleteKey+'_zyAutoCompleteList' })){
            api.setPrefs({ key: this.autoCompleteKey+'_zyAutoCompleteList', value:["我是搜索内容","我是搜索条件","我是搜索"].join("-zy-") })
        }
        try{
            api.setStatusBarStyle({ style: "light", color: "-" });
            api.removeLaunchView();
        }catch(e){
        }
    },
    watch:{
    },
    data() {
        return {
            //搜索组件示例 所需参数
            showzySearch: true,
            searchValue:"",
            //自动补全/搜索提示 唯一key 可同时存在多个
            showzyAutoComplete:true,
            autoCompleteKey:"autoComplete",
        };
    },
    computed: {

    },
    methods: {
        //获取焦点 弹出补全
        inputOnfocus(e){
            this.showzyAutoComplete = false;
            this.showzyAutoComplete = true;
        },
        //正在输入的时候重置一下把补全参数带过去（不这么写带不过去）
        inputOninput(e){
            this.searchValue = e.detail.value;
            this.showzyAutoComplete = false;
            this.showzyAutoComplete = true;
        },
        inputOnconfirm(e){
             api.toast({ msg:"业务搜索："+this.data.searchValue });
            //确定保存当前补全集合---------------
            var nowAutoComplete = (api.getPrefs({ sync: true, key:this.autoCompleteKey+'_zyAutoCompleteList' }) || ""),nowAutoCompleteList = [];
            if(nowAutoComplete){
                nowAutoCompleteList = nowAutoComplete.split('-zy-');
            }
            for(var i = 0; i < nowAutoCompleteList.length; i++){
                if(nowAutoCompleteList[i] === this.data.searchValue){
                    nowAutoCompleteList.splice(i,1);
                    break;
                }
            }
            this.data.searchValue && nowAutoCompleteList.unshift(this.data.searchValue);
            api.setPrefs({ key: this.autoCompleteKey+'_zyAutoCompleteList', value:nowAutoCompleteList.length?nowAutoCompleteList.join("-zy-"):"" })
            this.showzyAutoComplete = false;//搜索后关闭补全
        },
        setSearch(_text){ 
            this.searchValue = _text || "我是自定义内容";
        },
        //自动补全监听方法-------------------
        zyAutoCompleteEvent(e){
            //{"type":"cleanSingle","value":""}  type有cleanSingle(清空单个)、click(点击单个)、cleanAll(清空所有)、value为当前item的值
            if(e.detail.type == 'click'){
                this.setSearch(e.detail.value);
                this.inputOnconfirm();//点击之后 调用搜索
            }
        }
    }
};
</script>

帮助说明/联系方式

如需修改或修改样式请查看components下对应的stml,如需要更多自定义功能或反馈与BUG，可联系QQ:1161277121

是否仍需要帮助？ 请保持联络！
最后更新于 2024/04/24