topic Re: Javascript Search Widget - Search Multiple Fields in ArcGIS JavaScript Maps SDK Questions

Javascript Search Widget - Search Multiple Fields

LauraMiles1 — Mon, 22 Jun 2015 23:00:17 GMT

According to ESRI documentation, you should be able to add an array of fields for the widget to search on.

So this should work:

searchFields: ["LOT_NO", "CITY", "OWNER"]

But it does not. Am I making an error in syntax? It seems to only allow one field.

I want virtually every layer in my map to be searchable, but if I have to push a new source for every searchable field in every layer, the drop-down is going to become cumbersome - it already has with only a few layers (one category for Lots - Lot Number, one for Lots - City, Lots - Owner, etc.). I probably have around 30-40 layers in my map from various services. Not to mention it seems like a lot of unnecessary code...

Re: Javascript Search Widget - Search Multiple Fields

RobertScheitlin__GISP — Sat, 11 Dec 2021 21:15:45 GMT

Laura,

This sample works fine when I add a second search field to the sources.

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--The viewport meta tag is used to improve the presentation and behavior of the samples
  on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>ArcGIS API for JavaScript | Search widget with multiple sources</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
  <style>
    html,
    body,
    #map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #search {
      display: block;
      position: absolute;
      z-index: 2;
      top: 20px;
      left: 74px;
    }
  </style>

  <script src="http://js.arcgis.com/3.13/"></script>
  <script>
    require([
      "esri/map",
      "esri/dijit/Search",
      "esri/layers/FeatureLayer",
      "esri/InfoTemplate",
      "esri/SpatialReference",
      "esri/geometry/Extent",
      "dojo/domReady!"
      ], function (
      Map,
      Search,
      FeatureLayer,
      InfoTemplate,
      SpatialReference,
      Extent) {

      var map = new Map("map", {
        basemap: "gray",
        center: [-97, 38], // lon, lat
        zoom: 5
      });

      var s = new Search({
        enableButtonMode: true, //this enables the search widget to display as a single button
        enableLabel: false,
        enableInfoWindow: true,
        showInfoWindowOnSelect: false,
        map: map
      }, "search");

      var sources = s.get("sources");

      //Push the sources used to search, by default the ArcGIS Online World geocoder is included. In addition there is a feature layer of US congressional districts. The districts search is set up to find the "DISTRICTID". Also, a feature layer of senator information is set up to find based on the senator name.

      sources.push({
        featureLayer: new FeatureLayer("http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/CongressionalDistricts/FeatureServer/0"),
        searchFields: ["DISTRICTID", "PARTY"],
        displayField: "DISTRICTID",
        exactMatch: false,
        outFields: ["DISTRICTID", "NAME", "PARTY"],
        name: "Congressional Districts",
        placeholder: "3708",
        maxResults: 6,
        maxSuggestions: 6,

        //Create an InfoTemplate and include three fields
        infoTemplate: new InfoTemplate("Congressional District", "District ID: ${DISTRICTID}</br>Name: ${NAME}</br>Party Affiliation: ${PARTY}"),
        enableSuggestions: true,
        minCharacters: 0
      });

      sources.push({
        featureLayer: new FeatureLayer("http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/US_Senators/FeatureServer/0"),
        searchFields: ["Name", "Party"],
        displayField: "Name",
        exactMatch: false,
        name: "Senator",
        outFields: ["*"],
        placeholder: "Senator name",
        maxResults: 6,
        maxSuggestions: 6,

        //Create an InfoTemplate
        infoTemplate: new InfoTemplate("Senator information", "Name: ${Name}</br>State: ${State}</br>Party Affiliation: ${Party}</br>Phone No: ${Phone_Number}<br><a href=${Web_Page} target=_blank ;'>Website</a>"),
        enableSuggestions: true,
        minCharacters: 0
      });

      //Set the sources above to the search widget
      s.set("sources", sources);

      s.startup();

    });
  </script>
</head>

<body>
  <div id="search"></div>
  <div id="map"></div>
</body>

</html>

Re: Javascript Search Widget - Search Multiple Fields

LauraMiles1 — Tue, 23 Jun 2015 17:58:41 GMT

Hi Robert - I see that it does work, it's actually just suggesting from the displayField which is DISTRICTID in this case. What I would like (using this example) is for PARTY to populate the suggestions dropdown when you start typing "republican" for example - without having to code every service layer/field combo separately. Is there a way to have multiple displayFields? For my purposes, it's not ideal to populate the suggestions list with data from another field. The way it's set up if I have a user searching by owner name, the lot number would pop up for them to choose from or vice versa - I'd rather the user see suggestions for the actual text they are typing. A user searching on owner name would have to know and recognize the lot number, for example, which is usually not going to be the case for my users.

Re: Javascript Search Widget - Search Multiple Fields

RobertScheitlin__GISP — Tue, 23 Jun 2015 18:11:58 GMT

Laura,

Unfortunately multiple display field is not a possibility.

Glad to help. Now it is your turn to help the community by marking this question as answered. All you have to do is click the "Correct Answer" link (the one with the little green star) on the post that provided the answer for you. If the answer was not provided by one of the responders then you can mark any of the replies that you received as helpful by clicking on the "Actions" menu and choosing "Mark as Helpful"

Re: Javascript Search Widget - Search Multiple Fields

MattDriscoll — Tue, 23 Jun 2015 22:16:23 GMT

In 3.14, there will be an option to set a displayTemplate which will allow you to display the returned fields similar to a popup infoTemplate.

Re: Javascript Search Widget - Search Multiple Fields

LauraMiles1 — Tue, 23 Jun 2015 22:25:00 GMT

Thanks Matt, I look forward to 3.14 then! Do you know the expected release date?

Re: Javascript Search Widget - Search Multiple Fields

deleted-user-0W0-oLHxDjCX — Tue, 24 May 2016 19:11:28 GMT

Is there any update for this thread?

Re: Javascript Search Widget - Search Multiple Fields

LauraMiles1 — Wed, 25 May 2016 15:02:37 GMT

The ability to search multiple fields was added in 3.14. You use it as shown above - searchFields: ["DISTRICTID", "PARTY"] will search both the DISTRICTID and PARTY fields. Add these fields to the suggestion template as well to see them suggested in the dropdown while typing.

Re: Javascript Search Widget - Search Multiple Fields

deleted-user-0W0-oLHxDjCX — Wed, 25 May 2016 19:54:49 GMT

Thank you Laura Miles search for multiple fields are ok on version 2.0 of WAB but mutiple displays are not. Would be nice to have this feature in the future.

Thank you for your information.

Ezequias Rocha