How to use Multiple Sources in Search Widget

1019
16
Jump to solution
09-19-2018 11:56 AM
Rocky_
by
Occasional Contributor

    Can anyone please tell me how to use below array of sources

var searchWidget = new Search(); var sources = [{ ... }, { ... }, { ... }]; //array of sources

searchWidget.sources = sources;

 

when we want to search multiple layers which having same search-fields in it.

So we can search it using search-fields not with selecting feature layer.

Right now am using it like below

 

const searchWidget = new Search({
view: view,
locationEnabled: true,
withinViewEnabled: true,
sources: [{
featureLayer: {
Placeholder: "OBJID",
url: "------------------------------------------",
popupTemplate: PopupTemp1
},
searchFields: ["OBJID", "TRACKNUM"],
suggestionTemplate: "{OBJID}, {TRACKNUM}",
exactMatch: true,
outFields: ["*"],
placeholder: "eg: SD0051S Or 2336767 or ",
zoomScale: 5000,
resultSymbol: {
type: "simple-line",
color: "black",
width: 8,
cap: "round",
style: "short-dashdotdot"
}
},
{
featureLayer: {
url: "-------------------------------------------",
popupTemplate: PopupTemp2
},
searchFields: ["OBJID", "TRACKNUM"],
suggestionTemplate: "{OBJID}, {TRACKNUM}",
exactMatch: true,
outFields: ["*"],
placeholder: "eg:SD0051S Or 2336767",
zoomScale: 5000,
resultSymbol: {
type: "simple-line",
color: "black",
width: 8,
cap: "round",
style: "short-dashdotdot"
}
}]
}, "SearchDivOpen", "top-right");

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Sure. Here is a sample of that working:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Search widget with multiple sources - 4.8</title>

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

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

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

      var map = new Map({
        basemap: "dark-gray"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-97, 38], // lon, lat
        scale: 10000000
      });
      
      var mySources = [{
          featureLayer: {
            url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/CongressionalDistricts/FeatureServ...",
            popupTemplate: { // autocasts as new PopupTemplate()
              title: "Congressional District {DISTRICTID} </br>{NAME}, {PARTY}",
              overwriteActions: true
            }
          },
          searchFields: ["DISTRICTID"],
          displayField: "DISTRICTID",
          exactMatch: false,
          outFields: ["DISTRICTID", "NAME", "PARTY"],
          name: "Congressional Districts",
          placeholder: "example: 3708",
        }, {
          featureLayer: {
            url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/US_Senators/FeatureServer/0",
            popupTemplate: { // autocasts as new PopupTemplate()
              title: "<a href={Web_Page} target='_blank'> {Name}</a>, ({Party}-{State}) ",
              overwriteActions: true
            }
          },
          searchFields: ["Name", "Party"],
          suggestionTemplate: "{Name}, Party: {Party}",
          exactMatch: false,
          outFields: ["*"],
          placeholder: "example: Casey",
          name: "Senators",
          zoomScale: 500000,
          resultSymbol: {
            type: "picture-marker", // autocasts as new PictureMarkerSymbol()
            url: "images/senate.png",
            height: 36,
            width: 36
          }
        }];

      var searchWidget = new Search({
        view: view,
        allPlaceholder: "District or Senator",
        sources: mySources
      });

      // Add the search widget to the top left corner of the view
      view.ui.add(searchWidget, {
        position: "top-right"
      });
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>
</html>

View solution in original post

16 Replies
KellyHutchins
Esri Frequent Contributor

I'm not sure I understand the question but we do have a sample in the help that shows how to search multiple sources. When you run the sample you'll see that the 'All' option is selected by default which means it will search all the sources you have defined in the search widget without having to select a particular layer or locator: 

Search widget with multiple sources | ArcGIS API for JavaScript 4.8 

Rocky_
by
Occasional Contributor

Hello Kelly,

    Actually I am having 4 feature service urls. All of these url sources having 2 search search fields ["OBJID", "TRACKNUM"]... i want to search according to these fields.

So in search widget user can select search field and then it shows suggestions of all related search using all 4 feature layers..

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

RAJ,

  That example Kelly provided show a Search widget using multiple sources and by default the widget WILL search all sources using the search term entered using each sources search fields.

Rocky_
by
Occasional Contributor

I already tried used this one..Its working perfectly...but is there any way to use same multiple number of sources in widget and user can search by only selecting the search fields.. Cause all sources having same search fields..

In below sample they use only 2 sources with different search fields... 

for eg. ArcGIS API for JavaScript Sandbox 

sample

but what if I am having more than 2 sources and wanna search with 2 search fields ["OBJID", "TRACKNUM"]. which are available in all sources.. so i am trying to display a search widget menu like below

sampel

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

RAJ,

   You are missing how the search widget actually works. If a sources has two fields defines as search fields BOTH fields will be search for the search term for that source.

0 Kudos
Rocky_
by
Occasional Contributor

Really sorry. but I didn't get that.. Will you please elaborate more with snippet

0 Kudos
Rocky_
by
Occasional Contributor

Ok let me try one more time to explain, may be am not able to explaining my issue properly.

As you can see in actual Que above.. right now am using 2 different sources with their search fields separately in each source.. I just want to concatenate my code.. so i can use array of sources only once and define the search fields and other settings at only once..cause every source having same name search field..

and trying to display widget like below

sample

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

RAJ,

  This is whats confusing. A sources is the layer that will be searched but you seem to be showing two sources in your image based on the field...

If layer A has the field OBJID and TRACKID and so does layer B, Layer C, etc. then you define a source for each of those layers and set the search fields to be OBJID and TRACKID. Then by DEFAULT the search widget will search all sources using the defined search fields OBJID and TRACKID and show the results for each layer.

0 Kudos
Rocky_
by
Occasional Contributor

If you dont mind.. can you please modify my snippet

const searchWidget = new Search({
view: view,
locationEnabled: true,
withinViewEnabled: true,
sources: [{
featureLayer: {
Placeholder: "OBJID",
url: "------------------------------------------",
popupTemplate: PopupTemp1
},
searchFields: ["OBJID", "TRACKNUM"],
suggestionTemplate: "{OBJID}, {TRACKNUM}",
exactMatch: true,
outFields: ["*"],
placeholder: "eg: SD0051S Or 2336767 or ",
zoomScale: 5000,
resultSymbol: {
type: "simple-line",
color: "black",
width: 8,
cap: "round",
style: "short-dashdotdot"
}
},
{
featureLayer: {
url: "-------------------------------------------",
popupTemplate: PopupTemp2
},
searchFields: ["OBJID", "TRACKNUM"],
suggestionTemplate: "{OBJID}, {TRACKNUM}",
exactMatch: true,
outFields: ["*"],
placeholder: "eg:SD0051S Or 2336767",
zoomScale: 5000,
resultSymbol: {
type: "simple-line",
color: "black",
width: 8,
cap: "round",
style: "short-dashdotdot"
}
}]
}

0 Kudos