Search/Query Results

JennaWalz2 · ‎02-01-2016

Hello,

Is there a way to run a search or query and then have the suggested results displayed below the search. The user would then be able to click on the suggested result and it would zoom them to that feature. When you would zoom to the feature the suggested results would still stay populated. For example, say I run a search on the last name of Red. The suggested results would display Ted Red, Mike Red, Mary Red...

Thanks!

ChrisSmith7 · ‎02-01-2016

Ok, this is kind of a hack, but it should work:

<!DOCTYPE html>
<html dir="ltr">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <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="https://js.arcgis.com/3.15/dijit/themes/claro/claro.css">
   <link rel="stylesheet" href="https://js.arcgis.com/3.15/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>
<script src="https://js.arcgis.com/3.15/"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
   <script>
      require([
        "esri/map", "esri/dijit/Search", "esri/layers/FeatureLayer", "esri/InfoTemplate", "dojo/on", "dojo/domReady!"
      ], function (Map, Search, FeatureLayer, InfoTemplate, on) {
         var map = new Map("map", {
            basemap: "gray",
            center: [-97, 38], // lon, lat
            zoom: 5
         });


         var search = new Search({
            enableButtonMode: false, //needs to be false to keep search results open
            enableLabel: false,
            enableInfoWindow: true,
            showInfoWindowOnSelect: false,
            map: map
         }, "search");


         var sources = search.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/FeatureServe..."),
            searchFields: ["DISTRICTID"],
            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"],
            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
         search.set("sources", sources);
         search.startup();
         
         on(search,'select-result', function(e) {
           $("[aria-labelledby='search_input']").show();
         });


      });
   </script>
</head>


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


</html>

View solution in original post

ChrisSmith7 · ‎02-01-2016

Jenna,

Have you had a chance to review Search multiple sources | ArcGIS API for JavaScript? This should get you 90% of the way - that last part keeping the suggested results would need some work.

JennaWalz2 · ‎02-01-2016

I have a search working and displaying the suggested results. The problem arises when you select a suggestion the suggestion list disappears.

ChrisSmith7 · ‎02-01-2016

Looking over the API, there is a an "expanded" property and an "expand()" method - I'm looking into that now.

ChrisSmith7 · ‎02-01-2016

Darn, looks like that's just for the button...

ChrisSmith7 · ‎02-01-2016

Ok, this is kind of a hack, but it should work:

<!DOCTYPE html>
<html dir="ltr">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <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="https://js.arcgis.com/3.15/dijit/themes/claro/claro.css">
   <link rel="stylesheet" href="https://js.arcgis.com/3.15/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>
<script src="https://js.arcgis.com/3.15/"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
   <script>
      require([
        "esri/map", "esri/dijit/Search", "esri/layers/FeatureLayer", "esri/InfoTemplate", "dojo/on", "dojo/domReady!"
      ], function (Map, Search, FeatureLayer, InfoTemplate, on) {
         var map = new Map("map", {
            basemap: "gray",
            center: [-97, 38], // lon, lat
            zoom: 5
         });


         var search = new Search({
            enableButtonMode: false, //needs to be false to keep search results open
            enableLabel: false,
            enableInfoWindow: true,
            showInfoWindowOnSelect: false,
            map: map
         }, "search");


         var sources = search.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/FeatureServe..."),
            searchFields: ["DISTRICTID"],
            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"],
            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
         search.set("sources", sources);
         search.startup();
         
         on(search,'select-result', function(e) {
           $("[aria-labelledby='search_input']").show();
         });


      });
   </script>
</head>


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


</html>

JennaWalz2 · ‎02-01-2016

That worked great, thanks!!!

ChrisSmith7 · ‎02-01-2016

Awesome! I was testing a bit more and found the results pane is a little too flaky - this is still kludgy, but if you hook onto these events, it should work pretty well and is more intuitive to the user:

        on(search,'select-result', function(e) { 
          $("[aria-labelledby='search_input']").show(); 
        }); 

        on(search,'clear-search', function(e) { 
          $("[aria-labelledby='search_input']").hide(); 
        }); 
       
        on(search,'suggest-results', function(e) { 
          $("[aria-labelledby='search_input']").show(); 
        });
       
        on(map,'click', function(e) { 
          $("[aria-labelledby='search_input']").hide(); 
        });

JennaWalz2 · ‎02-01-2016

Thanks!