自动完成 AutoComplete

输入框自动完成功能

使用

API

安装使用

import { TiAutoComplete } from '@titian-design/mobile-react';

用法示例

搭配ti-search组件

codesanbox

copy

code

import React, { useState } from 'react';
import { TiAutoComplete, TiSearch } from 'titian-h5-react';

const mock = [{ label: 'a' }, { label: 'ab' }, { label: 'abc' }, { label: 'b' }, { label: 'bc' }];

export default function App() {
  const [options, setOptions] = useState([]);

  const onInput = (e: CustomEvent<{ value: string | number }>) => {
    const keyword = e.detail.value;
    setOptions(mock.filter(i => i.label.includes(`${keyword}`)));
  };
  return (
    <TiAutoComplete options={options}>
      <TiSearch onChange={onInput} onClear={() => setOptions([])} />
    </TiAutoComplete>
  );
}

搭配ti-textarea组件

codesanbox

copy

code

import React, { useState } from 'react';
import { TiAutoComplete, TiTextarea } from 'titian-h5-react';

const mock = [{ label: 'a' }, { label: 'ab' }, { label: 'abc' }, { label: 'b' }, { label: 'bc' }];

export default function App() {
  const [options, setOptions] = useState([]);

  const onInput = (e: CustomEvent<{ value: string | number }>) => {
    const keyword = e.detail.value;
    setOptions(mock.filter(i => i.label.includes(`${keyword}`)));
  };
  return (
    <div style={{ position: 'relative' }}>
      <TiAutoComplete options={options} isPopup={false}>
        <TiTextarea extStyle={{ border: '1px solid #9E9E9E' }} onInput={onInput} />
      </TiAutoComplete>
    </div>
  );
}

搭配ti-input组件

codesanbox

copy

code

import React, { useState } from 'react';
import { TiAutoComplete, TiInput } from 'titian-h5-react';

const mock = [{ label: 'a' }, { label: 'ab' }, { label: 'abc' }, { label: 'b' }, { label: 'bc' }];

export default function App() {
  const [options, setOptions] = useState([]);

  const onInput = (e: CustomEvent<{ value: string | number }>) => {
    const keyword = e.detail.value;
    setOptions(mock.filter(i => i.label.includes(`${keyword}`)));
  };
  return (
    <div style={{ position: 'relative' }}>
      <TiAutoComplete options={options} isPopup={false}>
        <TiInput label="地址" required onChange={onInput} onClear={() => setOptions([])} />
      </TiAutoComplete>
    </div>
  );
}

ti-search API

属性 Properties

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

事件 Events

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

插槽 Slots

名称	说明	备注
default	仅支持插入TiSearch、TiInput、TiTextarea	-

外部样式类 External Classes

名称	说明	备注
extClass	根节点样式类	-
extContentClass	弹出内容区域样式类	-

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