更新记录

v1.0.0（2022-03-25） 下载此版本

输入框自动补全

平台兼容性

基于uni-easyinput的自动提示组件

组件名：ui-autocomplete

关联组件： uni-easyinput、uni-icons

代码块： uiAutocomplete

输入自动匹配组件，实现了“节流操作”以及“最低匹配长度控制”，可自定义节流时间以及匹配开始长度，一般用于新页面中使用，组件实现简单

注意：本组件基于uni-easyinput、uni-icons实现输入以及清楚输入记录效果，使用前请先确保这两个组件已下载，否则无法执行

基本用法

父页面示例

<view @click="linkTo('autocomplete')">
    <text class="result-text" :class="{'color-gray': !(initData.name || initData)}">{{ initData.name || initData || '请选择' }}</text>
</view>

export default {
 data() {
    return {
     // 输入框初始值
     initData: '',
    }
  },
  onLoad() {
    // 页面通讯-监听设置---此处很重要，否则无法接收到选择结果
    uni.$on('autoCompleteResult', this.getResult)
  },
  methods:{
    // 获取返回的数据
    getResult(data){
        this.initData = data
    },
    linkTo(example){
        const keyWords = this.initData.name || this.initData
        uni.navigateTo({
            url: '/pages/examples/' + example + '?key='+ keyWords
        })
    }
  }
}

子页面示例

<ui-autocomplete :propsData="onloadData" :initData="initData"></ui-autocomplete>

export default {
 data() {
  return {
      // 存储输入框初始值(来自于被跳转页面的路由传参)
      initData: '',
     }
  },
  onLoad(options) {
    this.initData = options.key
  },
  methods:{
    onloadData(key){
        return this.getAutoData(key)
    },
    getAutoData(key){
        /* 异步获取 */
        return new Promise((resolve, reject) => {
            let data = [
                {'id':123,'name':'深圳迈瑞股份有限公司'},
                {'id':223,'name':'深圳腾讯网络科技股份有限公司'},
                {'id':323,'name':'深圳华为有限公司'}
            ]
            resolve(data)
        })
        /* 同步获取 */
        /* return [
                {'id':123,'name':'深圳迈瑞股份有限公司'},
                {'id':223,'name':'深圳腾讯网络科技股份有限公司'},
                {'id':323,'name':'深圳华为有限公司'}
            ] */
    }
  }
}

注意：在父页面设置autoCompleteResult侦听是必须的，用来接收最终结果

API

autocomplete Props

autocomplete Events

更多用法请查看-/pages/index/index.vue