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

自动补全插件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的插件市场向作者反馈，也可像我一样自己捯饬一下。