Autocomplete

Autocomplete是结果提示、自动完成类。

构造函数

构造函数	描述
Autocomplete(options: AutocompleteOptions)	创建自动完成的实例

AutocompleteOptions

本类是Autocomplete类的可选参数对象。

属性	类型	描述
location	String | Map | Point	设定返回结果的所属范围。例如"北京市"
types	Array<String>	返回数据类型。两种设置方式，第一种为默认值（即设置值为空），将返回所有数据。如地图初始化为北京，在输入框中输入"小"，输入框下会出现包含"小"关键字的多种类型（如餐饮、地名等）的提示词条。第二种设置值为"city"，将返回省市区县乡镇街道地址类型数据。如地图初始化为北京，在输入框中输入"小"，输入框下会出现"小金县"的地点名称类的提示词条
onSearchComplete	Function	在input框中输入字符后，发起列表检索，完成后的回调函数。 参数：AutocompleteResult
input	String | HTMLElement	文本输入框元素或其id

方法

方法	返回值	描述
show()	none	显示提示列表
hide()	none	隐藏提示列表
setTypes(types: type<Array>)	none	修改请求数据类型。types定义方法详见AutocompleteOptions
setLocation(location: String | Map | Point)	none	设置检索区域
search(keywords: string)	none	发起某个关键字的提示请求，会引起onSearchComplete的回调
getResults()	AutocompleteResult	获取结果列表
setInputValue(keyword: string)	none	设置绑定的input控件的值，且不会出现下拉列表
dispose()	none	销毁自动完成对象

事件

事件	参数	描述
onconfirm	{type: string, target: any, item: {index: number, value: AutocompleteResultPoi}}	回车选中某条记录后触发
onhighlight	{type: string, target: any, fromitem: {index: number, value: AutocompleteResultPoi}, toitem: {index: number, value: AutocompleteResultPoi}}	键盘或者鼠标移动，某条记录高亮之后，触发

AutocompleteResultPoi

自动完成类获取的单个POI点的信息。

属性	类型	描述
province	String	省名
City	String	城市名
district	String	区县名称
street	String	街道名称
streetNumber	String	门牌号码
business	String	商户名

AutocompleteResult

自动完成检索完成回调函数的参数对象。

属性

属性	类型	描述
keyword	String	检索关键字

方法

方法	返回值	描述
getPoi(i: Number)	AutocompleteResultPoi	结果数组
getNumPois()	Number	结果总数

示例

// 创建自动完成实例
const autocomplete = new BMapGL.Autocomplete({
  input: 'searchInput',
  location: '北京市',
  types: ['city'],
  onSearchComplete: (results: BMapGL.AutocompleteResult) => {
    console.log('检索关键字：', results.keyword);
    console.log('结果数量：', results.getNumPois());
    
    // 遍历结果
    for (let i = 0; i < results.getNumPois(); i++) {
      const poi = results.getPoi(i);
      console.log('POI信息：', poi);
    }
  }
});

// 监听选中事件
autocomplete.addEventListener('onconfirm', (e: any) => {
  console.log('选中项索引：', e.item.index);
  console.log('选中项信息：', e.item.value);
});

// 监听高亮事件
autocomplete.addEventListener('onhighlight', (e: any) => {
  console.log('从', e.fromitem.index, '高亮到', e.toitem.index);
});

// 搜索
autocomplete.search('小');