AutoComplete 输入提示

通常情况下，开发者需要根据表单控件相关事件的触发来执行 AMap.AutoComplete 的 search 方法，并将返回结果绘制成DOM显示到页面上。除此之外，高德JS API还提供了一套默认的UI来帮助开发者节省时间、提升效率，自动在页面相应的表单控件上监听输入并显示匹配结果。

import { AutoComplete } from '@uiw/react-amap';
// 或者单独安装使用
import { AutoComplete } from '@uiw/react-amap-auto-complete';

基本用法

`jsx mdx:preview import React, { useState, useEffect, useRef } from 'react'; import ReactDOM from 'react-dom'; import { APILoader, AutoComplete } from '@uiw/react-amap';

const Example = () => { const mapRef = useRef(); const [data, setData] = useState(); const [city, setCity] = useState('上海市'); const [input, setInput] = useState(); useEffect(() => { setInput(mapRef.current); }, []); return ( <> <input type="text" ref={mapRef} /> <div style={{ width: '100%' }}> {input && ( <AutoComplete input={input} onSelect={(opts) => { setData(opts); console.log('@@@@', opts) }} /> )} <pre style={{ padding: 10, marginTop: 10 }}> {data ? JSON.stringify(data, null, 2) : '{请在输入框输入内容，下拉列表选择...}'} </> ); }

const Mount = () => ( <APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129"> <Example /> </APILoader> );

export default Mount; `

Props

事件