自动完成 AutoComplete

输入框自动完成功能

使用

API

安装使用

{
  // 原生小程序
  "usingComponents": {
    "ti-auto-complete": "@titian-design/weapp/auto-complete/index"
  },
  // titan-cli搭建的项目
  "usingComponents": {
    "ti-auto-complete": "platform://titian-mp/ti-auto-complete"
  }
}

用法示例

搭配ti-search组件

• App.wxml
• index.js

code

copy

code

<ti-auto-complete options="{{options}}">
  <ti-search bind:change="onInput" bind:clear="onClear" />
</ti-auto-complete>

copy

code

const YOUR_SEARCH_API = async () => [];

Page({
  data: {
    options: [],
    onChange(e) {
      const keyword = e.detail.value;
      // 可添加debounce
      YOUR_SEARCH_API(keyword).then(data => {
        // [{ label: '长江路258号' }]
        this.setData({ options: data });
      });
    },
    onClear() {
      this.setData({ options: [] });
    },
    onSelect() {
      // ...
    },
  },
});

搭配ti-textarea组件

• App.wxml
• index.js

code

copy

code

<ti-auto-complete options="{{options}}">
  <ti-textarea extStyle="border: 1px solid #9E9E9E" bind:input="onInput" />
</ti-auto-complete>

copy

code

const YOUR_SEARCH_API = async () => [];

Page({
  data: {
    options: [],
    onChange(e) {
      const keyword = e.detail.value;
      // 可添加debounce
      YOUR_SEARCH_API(keyword).then(data => {
        // [{ label: '长江路258号' }]
        this.setData({ options: data });
      });
    },
    onClear() {
      this.setData({ options: [] });
    },
    onSelect() {
      // ...
    },
  },
});

搭配ti-input组件

• App.wxml
• index.js

code

copy

code

<ti-auto-complete options="{{options}}">
  <ti-input label="地址" required bind:change="onInput" bind:clear="onClear" placeholder="placeholder" />
</ti-auto-complete>

copy

code

const YOUR_SEARCH_API = async () => [];

Page({
  data: {
    options: [],
    onChange(e) {
      const keyword = e.detail.value;
      // 可添加debounce
      YOUR_SEARCH_API(keyword).then(data => {
        // [{ label: '长江路258号' }]
        this.setData({ options: data });
      });
    },
    onClear() {
      this.setData({ options: [] });
    },
    onSelect() {
      // ...
    },
  },
});

ti-search API

属性 Properties

名称	类型	必填	默认值	说明	备注
options	array	否	-	数据化配置选项内容，例：[{label: '关键词'}]	-
is-popup	boolean	否	true	是否脱离文档流，不占据输入组件下方位置	-
prefix-icon	string	否	-	每项数据前方显示的图标名称	-
alias	Record<string, string>	否	-	数据项默认字段名label的别名	-
safe-area	boolean	否	true	使用底部安全栏	-
ext-style	string	否	-	根节点样	-

事件 Events

名称	参数列表	描述	备注
bind:select	(e: WechatMiniprogram.CustomEvent) => void	输入框聚焦时触发	-

插槽 Slots

名称	说明	备注
default	仅支持插入ti-search、ti-input、ti-textarea	-

外部样式类 External Classes

名称	说明	备注
ext-class	根节点样式类	-
ext-content-class	弹出内容区域样式类	-

CSS 变量 CSS Variable

变量	默认值	说明	备注
--auto-complete-height	-	组件高度，不包括输入组件，超出高度后可滚动	-
--auto-complete-background	#fff	组件背景色	-
--auto-complete-padding-top	0	组件上边距	-
--auto-complete-padding-bottom	24rpx	组件下边距	-
--auto-complete-item-padding-v	32rpx	每一项垂直内边距	-
--auto-complete-item-padding-h	28rpx	每一项水平内边距	-
--auto-complete-icon-gap	24rpx	每一项图标和文字间距	-
--auto-complete-icon-font-size	32rpx	图标大小	-
--auto-complete-icon-line-height	32rpx	图标行高	-
--auto-complete-icon-color	rgba(0, 0, 0, 90%)	图标颜色	-
--auto-complete-text-font-size	28rpx	文字字号	-
--auto-complete-text-line-heigh	32rpx	文字行高	-
--auto-complete-text-color	rgba(0, 0, 0, 25%)	文字颜色	-
--auto-complete-text-font-weight	400	文字字重	-
--auto-complete-text-highlight-color	#fa2c19	文字高亮颜色，默认跟随主题色	-