---
metadata:
  - name: generator
    content: Diplodoc Platform v5.39.1
alternate:
  - https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/SuggestView.md
  - https://yandex.com/dev/jsapi-v2-1/doc/ru/v2-1/ref/reference/SuggestView.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com/dev/jsapi-v2-1/doc/en/llms.txt

# SuggestView

{% include [include](../../../_includes/2.1/terms/index-e50a13eaa8b4.md) %}

Extends [ICustomizable](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ICustomizable.md), [IEventEmitter](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IEventEmitter.md).

Creates a drop-down list with search suggestions and attaches it to the HTML element `<input type="text">`.

[Constructor](#constructor-summary) | [Fields](#properties-summary) | [Events](#events-summary) | [Methods](#methods-summary)

## Constructor {#constructor-summary}

```javascript
SuggestView(element[, options])
```

**Parameters:**

#|
|| **Parameter** | **Default value** | **Description**  ||
|| [`element`](#param-element)[*](*star) | — | Type: HTMLElement\|String

HTML element or its ID. ||
|| [`options`](#param-options) | — | Type: Object

Options. ||
|| [`options.boundedBy`](#param-options.boundedBy) | — | Type: Number[][]

A rectangular area on the map, where the object being searched for is presumably located. Must be set as an array, such as [[30, 40], [50, 50]]. ||
|| [`options.container`](#param-options.container) | — | Type: HTMLElement

HTML element for placing the display of the suggestions panel. If omitted, the suggestions panel is added to the parent of the HTML "input" element that it is created for. ||
|| [`options.layout`](#param-options.layout) | 'islands#suggestView' | Type: String\|[ISuggestViewLayout](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ISuggestViewLayout.md)

Panel layout.

The layout constructor is passed an object containing the fields:

- suggestView - Link to the panel with search suggestions.
- options - Options manager for the control suggestView.options.
- state - State manager for the control suggestView.state.

The layout adapts its appearance based on the state and options of the suggestions panel. The control, in turn, reacts to layout interface events and changes the values of fields for suggestView.state depending on the commands received. ||
|| [`options.offset`](#param-options.offset) | — | Type: Number[]

Offsets of the suggestions panel from its default location (by default, the suggestions panel is attached to the lower edge of the "input" element and has the same width as it). Set as horizontal and vertical offsets relative to the lower-left corner of the "input" element. ||
|| [`options.provider`](#param-options.provider) | "yandex#map" | Type: String\|[ISuggestProvider](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ISuggestProvider.md)

Provider for search suggestions. May be set as an object implementing the [ISuggestProvider](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ISuggestProvider.md) interface, or the standard value "yandex#map". ||
|| [`options.results`](#param-options.results) | 5 | Type: Number

Maximum quantity of suggestions to display. ||
|| [`options.width`](#param-options.width) | — | Type: Number

Width of the suggestions panel. By default, the same as the width of the HTML "input" element to which the panel is attached. ||
|| [`options.zIndex`](#param-options.zIndex) | 40000 | Type: Number

The z-index for the dom element of the suggestions panel. ||
|#

\* Mandatory parameter/option.

**Examples:**

**1.**

```javascript
<input type="text" id="suggest"/>


```

**2.**

```javascript
<input type="text" id="suggest"/>


```

## Fields {#properties-summary}

#|
|| **Name** | **Type** | **Description** ||
|| [events](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IEventEmitter.md#events) | [IEventManager](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IEventManager.md) | Event manager.

Inherited from [IEventEmitter](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IEventEmitter.md#events). ||
|| [options](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ICustomizable.md#options) | [IOptionManager](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/IOptionManager.md) | Options manager.

Inherited from [ICustomizable](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ICustomizable.md#options). ||
|| [state](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/SuggestView.md#state) | [data.Manager](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/data.Manager.md) | State of the search suggestions panel. Names of fields that are available via the data.Manager.get method: 
- request: String — Current active request.
- items: Object[] - Array of search suggestions (objects with the value and displayName fields).
- activeIndex: Number\|null - Index of the currently active suggestion selected by the user with the mouse or keyboard, or null, if none of the suggestions is active.
- panelClosed: Boolean - Indicates whether the user closed the panel by pressing ESC or choosing one of the suggestions. ||
|#

## Events {#events-summary}

#|
|| **Name** | **Description** ||
|| [optionschange](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ICustomizable.md#event-optionschange) | Change to the object options.

Inherited from [ICustomizable](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/ICustomizable.md#event-optionschange). ||
|| [select](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/SuggestView.md#event-select) | The user selected one of the search suggestions. Names of fields that are available via the [Event.get](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Event.md#get) method 
- `item` – A search suggestion (an object with the "displayName" and "value" fields). ||
|#

## Methods {#methods-summary}

#|
|| **Name** | **Returns** | **Description** ||
|| [destroy](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/SuggestView.md#destroy)() | Destroys the search suggestions panel. ||
|#

## Fields details {#field_detail}

### state {#state}

```javascript
{data.Manager} state
```

State of the search suggestions panel. Names of fields that are available via the data.Manager.get method: 
- request: String — Current active request.
- items: Object[] - Array of search suggestions (objects with the value and displayName fields).
- activeIndex: Number|null - Index of the currently active suggestion selected by the user with the mouse or keyboard, or null, if none of the suggestions is active.
- panelClosed: Boolean - Indicates whether the user closed the panel by pressing ESC or choosing one of the suggestions.

## Events details {#event_detail}

### select {#select}

The user selected one of the search suggestions. Names of fields that are available via the [Event.get](https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/ref/reference/Event.md#get) method 
- `item` – A search suggestion (an object with the "displayName" and "value" fields).

## Methods details {#method_detail}

### destroy {#destroy}

```javascript
{} destroy()
```

Destroys the search suggestions panel.


[*star]: Mandatory parameter/option.