团队游后台 模糊搜索 组件

API

| 属性 | 说明 | 类型 | 默认值 | 是否必传 | | ---- | ---- | ---- | ---- | ---- | | urlFn | 根据用户输入拼接URL函数 | Function(value) | |是| | initData | 初始传入数据 | Array | {key:xxx, label: xxx}形式 | 是| | keyName | 返回数据的key值 | String | 用户选择数据后{keyName: data}以这种形式返回选择的数据 |是| | disabled | 是否只读 | Boolean | false |否| | singleType | 是否单选模式 | Boolean | false |否| | callback | 用户选择数据后回调函数 | Function({keyName: value}) | |否| | formatDataFn | 格式化获取数据函数 | Function | 必须返回{key:xxx, label: xxx}格式数据 |否| | formatLabelFn | 格式化展示数据函数 | Function | 返回{key:xxx, label: xxx}格式数据 |否|

install

$ npm install wox-gtour-autocomplete

use

import WoxGtourAutoComplete from 'wox-gtour-autocomplete';

<WoxGtourAutoComplete 
  url={(v)=>`url?key=${v}`}
  callback={this.props.callback} 
  initData={this.props.data.startLocationInfos} 
  keyName='keyName'
  // singleType={true}
  // disabled={true}
  formatDataFn={(val)=>val.map(v=>({key: v.id, label: v.name}))} 
  formatLabelFn={(val)=>val.map(v=>({key: v.id, label: `【${v.id}】v.name`}))}
  style={{width: 400}}
/>