parse search widget 4.4 to a html search form

Henryobaseki · ‎07-02-2017

Hi All,

The code would normally work using Javascript 4.3, my search widget outside my mapView but seems not to be working in 4.4.

<!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.4</title>

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

  <link rel="stylesheet" href="https://js.arcgis.com/4.4/esri/css/main.css">
  <script src="https://js.arcgis.com/4.4/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/SceneView",
      "esri/widgets/Search",
      "dojo/domReady!"
    ], function(
      Map,
      SceneView,
      Search) {

      var map = new Map({
        basemap: "satellite",
        ground: "world-elevation"
      });

      var view = new SceneView({
        scale: 123456789,
        container: "viewDiv",
        map: map
      });

      var searchWidget = new Search({
        view: view
      });

      // Add the search widget to the very top left corner of the view
      
    console.log(document.getElementById("submitButton"))
    document.getElementById("submitButton").onclick = (e)=> {
      e.preventDefault()
      let el = document.getElementById("input")
      console.log(el.value)
     
      searchWidget.search(el.value).then((result)=> {
        console.log("result", result)
      })
    }
       });
        
    
  </script>
</head>

<body>
  <div>
    <form>
      <input placeholder="Enter your address" type="text" id="input">
      <button id="submitButton">Submit</button>
    </form>
  </div>
  <div id="viewDiv"></div>
</body>

</html>

Thanks in advance

Jean-MarcRoy1 · ‎07-03-2017

Hi Henry obaseki‌,

If you want to use your own form and input with the searchWidget, you have to use the "search" method of the widget.

In this case you don't need to add the widget in a container, but simply construct it with the view. You can then use the input value to search with the widget.

Your code will look like that :

var searchWidget = new Search{view: view1})
function mySubmitFunction () {
  let element = document.getElementById("YourInputID")
  let address = element.value

  searchWidget.search(address).then((results) => {
     console.log("Search widget results :", results)
  })
})
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I made a plunker to show an example with plainJS here: Plunker.

It will show the result on the map, only if you get a single result, otherwise you will need to pick up the suggested results and pass them on to the view so that the end user can select the correct result.

Hope it help!

Best

View solution in original post

Jean-MarcRoy1 · ‎07-03-2017

Hi Henry obaseki‌,

If you want to use your own form and input with the searchWidget, you have to use the "search" method of the widget.

In this case you don't need to add the widget in a container, but simply construct it with the view. You can then use the input value to search with the widget.

Your code will look like that :

var searchWidget = new Search{view: view1})
function mySubmitFunction () {
  let element = document.getElementById("YourInputID")
  let address = element.value

  searchWidget.search(address).then((results) => {
     console.log("Search widget results :", results)
  })
})
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I made a plunker to show an example with plainJS here: Plunker.

It will show the result on the map, only if you get a single result, otherwise you will need to pick up the suggested results and pass them on to the view so that the end user can select the correct result.

Hope it help!

Best

Henryobaseki · ‎07-03-2017

Thanks Jean,

Tried the code it works!

Thank you

Henryobaseki · ‎07-03-2017

Hi Jean-Marc Roy,

One more thing

Do have multiple search sources to pass to my widget, it does work on a different html, its just how to incorporate it to my above code if you could please test in using the Plunker

Thank you!

var searchWidget = new Search({
        view: view,
        allPlaceholder: "District or Senator",
        sources: [{
          featureLayer: new FeatureLayer({
            url: "https://services7.arcgis.com/uE69mPI6U3rpSmCT/arcgis/rest/services/aAdd_csv/FeatureServer/0",
            popupTemplate: { // autocasts as new popupTemplate()
              title:  "Post Code: ${Postcode}</br>UPRN: ${UPRN}</br>ADDRESS: ${ADDRESS}",
              overwriteActions: true
            }
          }),
          searchFields: ["Postcode", "UPRN"],
          displayField: "Postcode",
          exactMatch: false,
          outFields: ["Postcode", "UPRN", "ADDRESS"],
          name: "Postcode",
          placeholder: "example:  CM2 0HU",
        }, 
        
        
        
        {
          
          
          
          featureLayer: new FeatureLayer({
            url: "https://services7.arcgis.com/uE69mPI6U3rpSmCT/arcgis/rest/services/postcodesS/FeatureServer/0",
            popupTemplate: { // autocasts as new popupTemplate()
              title: "Post Code: ${Postcode_3}</br>Wards Name: ${Ward_Name}</br>Ward: ${Ward_Code}",
              overwriteActions: true
            }
          }),
          searchFields: ["Postcode_3", "Ward_Name"],
          suggestionTemplate: "{Postcode_3}, Ward_Name: {Ward_Nmae}",
          exactMatch: false,
          outFields: ["*"],
          name: "Postcode",
          zoomScale: 50,
          resultSymbol: new PictureMarkerSymbol({
            url: "images/senate.png",
            height: 36,
            width: 36
          })
        }]
      });

Jean-MarcRoy1 · ‎07-03-2017

Hi Henry obaseki‌,

Here is a working example with your layer sources: Plunker.

I was able to find a location on layerSource1 with "CM" and find a location on layerSource2 with "IG11".

Henryobaseki · ‎07-03-2017

Thank you, its working...

fggriffith · ‎07-25-2022

Is it possible to have the search widget auto-fill when it's outside of the map?