topic Re: parse search widget to a html search form in ArcGIS JavaScript Maps SDK Questions

parse search widget 4.4 to a html search form

Henryobaseki — Sun, 02 Jul 2017 08:17:45 GMT

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

Re: parse search widget to a html search form

Jean-MarcRoy1 — Sun, 12 Dec 2021 03:46:00 GMT

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

Re: parse search widget to a html search form

Henryobaseki — Mon, 03 Jul 2017 14:12:58 GMT

Thanks Jean,

Tried the code it works!

Thank you

Re: parse search widget to a html search form

Henryobaseki — Mon, 03 Jul 2017 15:50:29 GMT

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
          })
        }]
      });

Re: parse search widget to a html search form

Jean-MarcRoy1 — Mon, 03 Jul 2017 18:09:46 GMT

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".

Re: parse search widget to a html search form

Henryobaseki — Mon, 03 Jul 2017 18:40:58 GMT

Thank you, its working...

Re: parse search widget 4.4 to a html search form

fggriffith — Mon, 25 Jul 2022 20:25:20 GMT

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