nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Javascript Search Widget - Search Multiple Fields

LauraMiles1

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

Encuentra más publicaciones etiquetadas con

Accepted answers

rscheitlin

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"

All comments

deleted-user-0W0-oLHxDjCX

Is there any update for this thread?

LauraMiles1

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

MattDriscoll

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.

rscheitlin

Laura,

Unfortunately multiple display field is not a possibility.

LauraMiles1

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.

rscheitlin

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>

Únete a la Conversación

Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.

Iniciar Sesión
Registrarse

Enlaces Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.