ym.modules.autoComplete V5
Initialization
If you are using the old autocomplete version 3, click here. If you want to switch to the new autocomplete v5, here are the migration instructions.
How to initialize the Autocomplete componente:
Code example: Initialization Autocomplete
// Übergebe Version AutoComplete
ym.ready({ autocomplete: 5 }, function (modules) {
// Pass version of AutoComplete
var autocomplete1 = new ym.modules.AutoComplete('#autocomplete1',
{
onSelected: function (geoJson) {
geocoder.geocode(geoJson.properties.location);
}
});
// Use the factory method to create the instance.
var autocomplete2 = ym.modules.autoComplete('#autocomplete2',
{
onSelected: function (geoJson) {
geocoder.geocode(geoJson.properties.location);
}
});
});
Constructor( selector, settings )
Parameter: selector
In the selector parameter, a CSS3-Selector can be passed that will be added to the input field of the autocomplete.
Parameter: settings
The passed parameters can be adjusted afterwards by accessing the options variable on the Autocomplete object and changing the individual variables. The next search will then use the changed parameters.
| Name | Description | Data type | Default value |
|---|---|---|---|
className |
Adds a CSS class to the autocomplete container. | string |
"" |
isoCountries |
The countries in which to search: An array with any number of country codes according to ISO-3166-2 can be passed. If the parameter is not passed, all supported countries will be searched. (Must be lower case) | string[] |
[] |
isoLanguages |
Defines the localizations to be returned: An array with any number of country codes according to ISO-3166-2 is passed. Only the first element will be used. | string[] |
[] |
radius |
Limits the search area to a radius in m. The coordinate of the center point can be set with the method setCenter(latlng). | number |
0 |
positionIsFixed |
Affected the linked SmartMaps to the autocomplete via the .setMap(map) method. By default, the search is performed in the current map section. If you always want to search in the initial map section, the value must be set to true. | boolean |
false |
suggestionItemAlign |
Allows to force the result list to be written in one row (rows) or in two columns. With auto, the width is automatically changed to one row (rows) when the width exceeds 320px. | "rows", "columns" oder "auto" |
"auto" |
showCountry |
Displays the country in the suggestion list, if available. | boolean |
true |
showState |
Displays the state in the suggestion list, if available. | boolean |
false |
showCounty |
Displays the county in the suggestion list, if available. | boolean |
false |
showDistrict |
Displays the district in the suggestion list, if available. | boolean |
false |
showZip |
Displays the postal code in the suggestion list, if available. | boolean |
true |
showVillage |
Displays the village in the suggestion list, if available. | boolean |
false |
showCityPart |
Displays the citypart in the suggestion list, if available. | boolean |
false |
showNeighborhood |
Displays the neighborhood in the suggestion list, if available. | boolean |
false |
showStreet |
Displays the street in the suggestion list, if available. | boolean |
true |
showPoi |
Displays the point of interest in the suggestion list, if available. | boolean |
true |
proximityBoost |
The proximityBoost weights the result list by a geocoordinate and a radius. The geo-coordinate can be taken from the map instance with setMap(map) or by a coordinate with setCenter(latlng). The higher the value value in the proximity boost, the more results in the radius are preferred. | {
enable?: boolean;
value?: number;
radius?: number;
} |
{ enable: false, value: 1} |
boundingBoxBoost |
The BoundingBoxBoost weights the result list by a rectangle. The bounding box can be taken from the map instance with setMap(map) or from a rectangle with setBounds(latlng). The higher the value in boundingBoxBoost,the more results in the rectangle are preferred. | {
enable?: boolean;
value?: number;
} |
{ enable: false, value: 1 } |
inBoundingBox |
Shows only results that lie in the rectangle specified in the boundingBoxBoost parameter. | boolean |
false |
searchZip |
Allows the search of postal codes. | boolean |
false |
pins |
Allows you to set the icons in the results list. | Array<{
html: string;
type?: 'UNDEFINED'
| 'AIRPORT'
| 'CITY'
| 'CITY_WITH_ZIP'
| 'CITYPART'
| 'CITYPART_WITH_ZIP'
| 'COUNTY'
| 'COUNTRY'
| 'DISTRICT'
| 'NEIGHBOURHOOD'
| 'STATE'
| 'STREET'
| 'STREET_WITHOUT_CITY'
| 'TRAIN_STATION'
| 'ZIP'
| 'ISLAND'
| 'VILLAGE'
| 'ATTRACTION';
width?: number;
height?: number;
color?: string;
}> |
[
{
html: ' |
includeFilters |
The properties set to true force only results to be returned that match the corresponding fields. | {
airport?: boolean;
attraction?: boolean;
city?: boolean;
citypart?: boolean;
county?: boolean;
country?: boolean;
district?: boolean;
island?: boolean;
neighborhood?: boolean;
state?: boolean;
street?: boolean;
streetWithoutCity?: boolean;
trainstation?: boolean;
village?: boolean;
zip?: boolean;
zipCity?: boolean;
zipCitypart?: boolean;
} |
[] |
excludeFilters |
The properties set to true force only results to be returned that do not match the corresponding fields. | {
airport?: boolean;
attraction?: boolean;
city?: boolean;
citypart?: boolean;
county?: boolean;
country?: boolean;
district?: boolean;
island?: boolean;
neighborhood?: boolean;
state?: boolean;
street?: boolean;
streetWithoutCity?: boolean;
trainstation?: boolean;
village?: boolean;
zip?: boolean;
zipCity?: boolean;
zipCitypart?: boolean;
} |
[] |
Methods
update()
Triggers a new search query and then opens the results list.
updateMap()
Updates the bounding box of the map and forces the recalculation of the center and radius.
fetch(query: string)
Fetches the result list and returns it as GeoJSON.
open()
If there are proposals, the results list will be opened immediately.
close()
Closes the proposal list immediately.
setMap(map: ym.Map)
Registers a map for the Autocomplete search. If the map is registered in Autocomplete, the rectangle of the map section is automatically used as the search area for the search
removeMap()
Removes the registered map from the autocomplete search. By removing the map, there is no longer a local restriction.
setCenter(latlng: ym.LatLng, radius?: number)
Defines a search area using the radius set in the options, in which the search query should be executed.
getCenter()
If present, a LatLng object is returned that defines the center of the search rectangle. If no search rectangle is defined, undefined is returned.
setBounds(latlngBounds: ym.LatLngBounds)
Defines a search area based on a search rectangle.
getBounds()
If present, a LatLngBounds object is returned that defines the search rectangle. If no search rectangle is defined, undefined is returned.
whenReady()
Argument: onReady: (error?: Error) => void
Executes an onReady callback after the autocomplete component is ready.
Return: Promise
Return: Promise
Events
| Name | Beschreibung | Datentyp |
|---|---|---|
ready |
The event ready is called when the autocomplete has been initialized. |
event |
suggestion(geoJson, addresses, query) |
The event is fired after the autocomplete has received a list of results from the web service, then suggestion called. It receives a GeoJson , an address list and the search query. |
event |
empty(query) |
If no hits could be determined by the autocomplete, then onEmpty is called. Here only the search query is returned. |
event |
selected(geoJson, address, query) |
Selecting a hit in the autocomplete suggestion list triggers onSelected. It receives a GeoJson , an address list and the search query. |
event |
error(error) |
If there is a server-side problem or a problem with the data connection, this event will be triggered. | event |
CSS-Variablen
The design of Autocomplete can be configured via CSS variables. For this, they must be defined in the :root pseudo-class. Not supported by Internet Explorer.
| Name | Beschreibung | Datentyp | Standardwert |
|---|---|---|---|
--smartmaps-text-color |
Defines the text and icon color of the input field and result list. | CSS-Color |
#707070 |
--smartmaps-input-bg-color |
Defines the background color of the input field. | CSS-Color |
#ffffff |
--smartmaps-suggestion-bg |
Defines the background color of the result list. | CSS-Color |
#ffffff |
--smartmaps-suggestion-hover-bg |
Defines the background color of a result in the result list when the mouse is moved over it. | CSS-Color |
#ebebeb |
--smartmaps-suggestion-hover-fg |
Defines the text and icon color of a result in the result list when the mouse is moved over it. | CSS-Color |
#707070 |
--smartmaps-mark-bg |
Defines the background color of the highlighting, the match with the search string within the result list. | CSS-Color |
transparent |
--smartmaps-mark-hover-bg |
Defines the background color of the highlighting that matches the search string within the result list when the mouse is hovered over it. | CSS-Color |
transparent |
--smartmaps-border |
Defines the border of the input field and the result list. | CSS-Border |
1px solid rgba(0, 0, 0, 0.2) |
--smartmaps-boxshadow |
Defines the shadow of the input field and the result list. | CSS-Box-Shadow |
0 5px 10px rgba(0, 0, 0, 0.2) |
--smartmaps-font-size |
Defines the font size, of the input field and the result list. | CSS-Font-Size |
14px |