7.1.1 Basic Implementation

A basic implementation of the Search widget is really quite simple, as demonstrated by the pen below.  

See the Pen Search Widget Basic Implementation by Jim Detwiler (@jimdetwiler) on CodePen.

After adding the Search module to the import() array, all that is necessary to implement the widget is to create a new object of the Search class, set its view property to the app’s view, then add the widget to the view’s UI in the desired position. The widget will match the user’s text against Esri’s World Geocode service by default.

Some properties of the widget that you might consider customizing include:

  • allPlaceholder – text users see in the search box prompting them on what to enter
  • minSuggestCharacters – number of characters that must be entered before queries are made against the widget’s source
  • popupEnabled – Boolean specifying whether a popup can be opened over a search result
  • popupOpenOnSelect – Boolean specifying whether a popup should open automatically over the selected result
  • popupTemplate – object that defines what the user sees in the popup

Note

You may see the documentation lists this widget as deprecated as of version 4.33.  This means that it is a part of the SDK that is still available, but that Esri recommends avoiding in new apps in favor of a newer option. The Search widget is one of many that Esri is replacing with a map component (a custom HTML element).  We'll cover map components in the next lesson, at which point you may check out the Search component.  It offers many of the same properties as the Search widget covered here and you're likely to see the Search widget in older apps, hence the discussion of the widget here.