自动完成 AutoComplete

输入框自动完成功能

使用

API

用法示例

搭配ti-search组件

index.html

<ti-auto-complete id="ti-auto-complete">
  <ti-search id="ti-search" />
</ti-auto-complete>

index.js

window.onload = function(){
  var tiAutoComplete = document.getElementById("ti-auto-complete");
  var tiSearch = document.getElementById("ti-search");
  tiSearch.addEventListener('change', onChange, false)
  tiSearch.addEventListener('clear', onClear, false)
  function onChange(e) {
    const keyword = e.detail.value
    // 可添加debounce
    YOUR_SEARCH_API(keyword).then((data) => {
      // [{ label: '长江路258号' }]
      tiAutoComplete.options = data
    })
  };
  function onClear() {
    tiAutoComplete.options = []
  }
};

搭配ti-input组件

可设置isPopup属性为false，作用是将搜索建议插入到子组件下方，并占据位置。（默认行为是以绝对定位的方式覆盖子组件下方屏幕区域）

index.html

<ti-auto-complete id="ti-auto-complete">
  <ti-input id="ti-input" />
</ti-auto-complete>

index.js

window.onload = function(){
  var tiAutoComplete = document.getElementById("ti-auto-complete");
  var tiInput = document.getElementById("ti-input");
  tiInput.addEventListener('change', onChange, false)
  tiInput.addEventListener('clear', onClear, false)
  function onChange(e) {
    const keyword = e.detail.value
    // 可添加debounce
    YOUR_SEARCH_API(keyword).then((data) => {
      // [{ label: '长江路258号' }]
      tiAutoComplete.options = data
    })
  };
  function onClear() {
    tiAutoComplete.options = []
  }
};

搭配ti-textarea组件

index.html

<ti-auto-complete id="ti-auto-complete">
  <ti-textarea id="ti-textarea" />
</ti-auto-complete>

index.js

window.onload = function(){
  var tiAutoComplete = document.getElementById("ti-auto-complete");
  var tiTextarea = document.getElementById("ti-textarea");
  tiTextarea.addEventListener('change', onChange, false)
  function onChange(e) {
    const keyword = e.detail.value
    // 可添加debounce
    YOUR_SEARCH_API(keyword).then((data) => {
      // [{ label: '长江路258号' }]
      tiAutoComplete.options = data
    })
  };
};

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	文字高亮颜色，默认跟随主题色	-