1.0.5 • Published 8 years ago

wox-admin-autocomplete

Licence

MIT

Version

1.0.5

Deps

Size

16 kB

Vulns

Weekly

Summary Dependency Versions

Autocomplete

模糊搜索

API

属性	是否必填	说明	类型	默认值
urlFn	是	自定义请求URL `必填`	Function(value)
initData	是	初始传入数据	Array：[{key: xxx, label: xxx}]
placeholder	否	占位文案	String	'搜索'
keyName	是	返回数据的key值，用户选择数据后 `{keyName: data}` 以这种形式返回选择的数据 `必填`	String
disabled	否	是否只读	Boolean	false
singleType	否	是否单选模式	Boolean	false
callback	是	用户选择数据后回调函数	Function({keyName: value})
formatDataFn	是	自定义组件渲染数据，数据格式为: [{key: xxx, label: xxx}]	Function(res.data, keyword)
formatLabelFn	否	自定义组件展示数据，数据格式为: [{key: xxx, label: xxx}]	Function(value)
style	否	自定义样式	Object

formatDataFn

自定义组件渲染数据

formatDataFn: (values, keyword) => {
  const hotelsArr = values.map(value => ({
    key: value.id,
    label: `${value.id} - ${value.nameCN}`
  }));

  return [
    ...hotelsArr,
    { key: keyword, label: keyword },
    { key: '或同级', label: '或同级' }
  ];
}

formatLabelFn

自定义组件展示数据

formatLabelFn: (values) => {
  return values.map(value => ({
    key: value.id,
    label: `自定义展示LABEL: ${value.id} - ${value.name}`
  }));
}

Usage

import WoxAutoComplete from 'wox-admin-autocomplete';

<WoxAutoComplete
  urlFn={(keyString) => `url?key=${keyString}`}
  initData={this.props.data.startLocationInfos}
  placeholder="搜索酒店"
  keyName='keyName'
  disabled={false}
  singleType={true}
  callback={this.props.callback}
  formatDataFn={(values, keyword) => {
    return values.map(value => ({
      key: value.id,
      label: value.name
    }));
  }}
  formatLabelFn={(values) => {
    return values.map(value => ({
      key: value.id,
      label: `【${value.id}】v.name`
    }));
  }}
  style={{width: '400px'}}
/>

Keywords

react component