topic Re: Search/Query Results in ArcGIS JavaScript Maps SDK Questions

Search/Query Results

JennaWalz2 — Mon, 01 Feb 2016 15:42:27 GMT

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!

Re: Search/Query Results

ChrisSmith7 — Mon, 01 Feb 2016 15:51:15 GMT

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.

Re: Search/Query Results

JennaWalz2 — Mon, 01 Feb 2016 15:57:01 GMT

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

Re: Search/Query Results

ChrisSmith7 — Mon, 01 Feb 2016 15:59:05 GMT

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

Re: Search/Query Results

ChrisSmith7 — Mon, 01 Feb 2016 16:01:58 GMT

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

Re: Search/Query Results

ChrisSmith7 — Sat, 11 Dec 2021 10:34:17 GMT

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/FeatureServer/0"),
            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>

Re: Search/Query Results

JennaWalz2 — Mon, 01 Feb 2016 16:37:53 GMT

That worked great, thanks!!!

Re: Search/Query Results

ChrisSmith7 — Sat, 11 Dec 2021 10:34:20 GMT

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

Re: Search/Query Results

JennaWalz2 — Mon, 01 Feb 2016 16:59:03 GMT

Thanks!