自动完成 AutoComplete

输入框自动完成功能

使用

API

安装使用

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

用法示例

搭配ti-search组件

const App: React.FC = () => {
  const [options, setOptions] = useState([])
  const onInput = (e) => {
    const keyword = e.detail.value
    // 建议添加debounce
    YOUR_SEARCH_API(keyword).then((data) => {
      setOptions(data);
    })
  };
  const onClear = () => {
    setOptions([]);
  };
  return (
    <TiAutoComplete options={options}>
      <TiSearch onChange={onInput} onClear={onClear}></TiSearch>
    </TiAutoComplete>
  );
}

搭配ti-input组件

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

const App: React.FC = () => {
  const [options, setOptions] = useState([])
  const onInput = (e) => {
    const keyword = e.detail.value
    // 可添加debounce
    YOUR_SEARCH_API(keyword).then((data) => {
      // [{ label: '长江路258号' }]
      setOptions(data);
    })
  };
  const onClear = () => {
    setOptions([]);
  };
  return (
    <TiAutoComplete options={options} isPopup={false}>
      <TiInput label="地址" required onChange={onInput} onClear={onClear}></TiInput>
    </TiAutoComplete>
  );
}

搭配ti-textarea组件

const App: React.FC = () => {
  const [options, setOptions] = useState([])
  const onInput = (e) => {
    const keyword = e.detail.value
    // 建议添加debounce
    YOUR_SEARCH_API(keyword).then((data) => {
      setOptions(data);
    })
  };
  const onClear = () => {
    setOptions([]);
  };
  return (
    <TiAutoComplete options={options}>
      <TiTextarea onInput={onInput}></TiTextarea>
    </TiAutoComplete>
  );
}

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