Search Widget Fully Loaded?

deleted-user-RAnWn8DDSd1P · ‎07-11-2018

Is there a property you can watch or event to listen for to determine when the Search widget is fully loaded/rendered, i.e. the <input> within is available?

RobertScheitlin__GISP · ‎07-11-2018

What API version are you talking about?

deleted-user-RAnWn8DDSd1P · ‎07-11-2018

4.8

RobertScheitlin__GISP · ‎07-11-2018

Aaron,

See if this works for you.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Search widget - 4.8</title>
  <link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
      overflow: hidden;
    }
  </style>

  <script src="https://js.arcgis.com/4.8/"></script>
  <script>
    require([
        "esri/views/MapView",
        "esri/widgets/Search",
        "esri/WebMap",
        "esri/core/watchUtils",
        "dojo/aspect",

        "dojo/domReady!"
      ],
      function(
        MapView, Search, WebMap, watchUtils, aspect
      ) {

        var webmap = new WebMap({
          portalItem: { // autocasts as new PortalItem()
            id: "4abe6a830b8f466dacf8abfde567a781"
          }
        });

        var view = new MapView({
          container: "viewDiv",
          map: webmap
        });

        view.when(function() {
          // get the first layer in the collection of operational layers in the WebMap
          // when the resources in the MapView have loaded.
          var featureLayer = webmap.layers.getItemAt(0);

          var search = new Search({
            view: view
          });
          console.info(search);
          watchUtils.whenDefinedOnce(search, "searchTerm", function(evt){
            console.info(search.searchTerm);
          });

          // Add widget to the bottom right corner of the view
          view.ui.add(search, "bottom-right");
        });
      });
  </script>
</head>

<body class="calcite">
  <div id="viewDiv"></div>
</body>
</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍