07.uni-app自动补全插件input-autocomplete的使用

Posted 2021-05-14 潮汐先生

uni-app自动补全插件input-autocomplete的使用

• • 前言
  • input-autocomplete的使用
  • • 1.使用HBuilderX导入插件
    • 2.运行示例项目
    • 3.存在的问题
    • • 1).数据过渡曝光
      • 2).数据过多页面拉长的问题
    • 4.解决问题
    • • 1).问题一解决方案
      • 2).问题二解决方案

前言

上次使用uni-app开发的司机端总算告一段落了，接下来却开始了真正的噩梦。为什么这么说呢，因为这次开发的是企业管理端，开发内容和具体的业务逻辑都要比司机端要复杂的多，只能硬着头皮上啊，谁叫咱这么「优秀」呢？！o(╥﹏╥)o

我说过我是一个菜鸟，是真的！这不刚一上来就遇到了一个难题：后台登录页面的企业名称输入框有个自动补全的功能，像下图这样

咱也不怎么会vue啊，怎么办？第一时间想到去搜插件呗，在uniapp插件市场搜自动补全，如下图

先说一下我为什么选择第二个？

首先呢，第二个在下载|赞赏|收藏上人数都比较多；

其次呢，第二个样式好看些，我之前说过我是纯后端，前端的东西七窍通了六窍，唯有一窍不通o(╥﹏╥)o

input-autocomplete的使用

1.使用HBuilderX导入插件

一搬情况下我都是选择上面一种使用HBuilderX导入插件，但是为了演示本次效果，我们选择使用HBuilderX导入示例项目

导入成功之后就像下面这样

2.运行示例项目

我们来运行一下作者提供的测试项目，我们这里选择运行到小程序模拟器，在示例项目中我没有加载数据，我们首先看下使用静态数据的情况

3.存在的问题

1).数据过渡曝光

上面我们看到了，当输入框刚获取焦点就自动加载了所有的数据，这个在实际开发者是不合理的。就像我这次做的企业管理端，一个企业用户准备登录系统，刚准备输入自己的企业名称结果看到了平台上所有入驻的企业，这个就属于数据的过度曝光了

2).数据过多页面拉长的问题

我们修改改变静态数据的方法，将数据增加几条，如下

methods: {
		changeStaticData() {
				console.log('改变静态数据');
				this.autocompleteStringList= [
					'1汉字行',
					'1change data',
					'1guang zhou',
					{
						//自定义数据对象必须要有text属性
						text: '1hello',
						//其它字段根据业务需要添加
						key: '1hello key'
					},
					'1不 行',
					{
						//自定义数据对象必须要有text属性
						text: '1我是静态数据',
						//其它字段根据业务需要添加
						id: '1hz'
					},
					'2input-autoComplete',
					'3input-autoComplete',
					'4input-autoComplete',
					'5input-autoComplete',
					'6input-autoComplete',
					'7input-autoComplete',
					'8input-autoComplete',
					'9input-autoComplete',
					'10input-autoComplete',
				];
			}
		}

然后我们再次运行项目，结果看下图

4.解决问题

1).问题一解决方案

针对上面提到的问题一：我们需要在文本获取焦点的时候判断是否输入了内容，然后根据输入的内容去搜索结果并显示就可以了

首先我们为控件设置最小匹配长度min(必须最少输入几个字符才开启自动补全)

其次我们修改源码的方法getData,当输入长度小于min的时候，不显示选择框

这样我们的第一个问题就解决了，效果如下：

2).问题二解决方案

这个相比较与第一个就显得简单的多了，我们直接定位到源码最底部的样式，找到下方选择框.str-auto-complete-container的样式，修改成如下

<style>
  .str-auto-complete-container {
      min-width: 15%;
      height: auto;
      border: 1px solid #f3f3f4;
      position: absolute;
      z-index: 9997;
      background: #fff;
      // 开启处置方向的滚动条
      overflow-y:auto;
      // 最少显示1条记录的空间
      min-height: 53rpx;
      // 最多显示10条记录的空间
      max-height: 530rpx;

      .str-auto-complete-item {
        position: relative;
        padding: 10upx;
        z-index: 9999;
        // 更改以下每条记录的字体大小
        font-size: 28rpx;
      }
    }
</style

再次运行该示例项目，运行结果如下

解决完以上两个问题，该插件基本就可以使用了。当然了如果大家还有别的需求可以去uni-app的插件市场向作者反馈，也可像我一样自己捯饬一下。