dijit/search widget - not working

4972
3
Jump to solution
04-23-2015 08:38 AM
ShruthiR
New Contributor II

Hello,

I am working on dijit/search widget. I am trying to use to find trees on the feature layer based on Memorial feature.

When I try to search - it says Pagination error /enter a search term.

Not sure what I am missing.

Below is the code I am trying to work on. Can some one please let me know, If I am missing something ?

Unable to find much info on this widget.

<!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 | Basic Search</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>

      var dojoConfig = {

         parseOnLoad: true

      };

   </script>

   <script src="http://js.arcgis.com/3.13/"></script>

   <script>

      require([

"esri/map","esri/dijit/Search","esri/InfoTemplate","esri/dijit/Popup", "esri/dijit/PopupTemplate", "esri/layers/FeatureLayer",

"esri/symbols/SimpleFillSymbol", "esri/Color", "dojo/dom-class", "dojo/dom-construct", "dojo/on",

"esri/layers/ArcGISDynamicMapServiceLayer", "esri/layers/ArcGISTiledMapServiceLayer",

"dojox/charting/Chart", "dojox/charting/themes/Dollar", "esri/InfoTemplate","dojo/domReady!"

      ], function (Map,Search,InfoTemplate, Popup, PopupTemplate, FeatureLayer, SimpleFillSymbol, Color, domClass,

                 domConstruct, on, ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer, Chart,theme) {

          var fill = new SimpleFillSymbol("solid", null, new Color("#A4CE67"));

          var popup = new Popup({

            fillSymbol: fill,

            titleInBody: false

            }, domConstruct.create("div"));

            domClass.add(popup.domNode, "dark");

                         

         var map = new Map("map", {

            center: [-120.435, 46.159], // lon, lat

            zoom: 7,

            infoWindow: popup

         });

         var template = new PopupTemplate({

                    title: "BGSU Memorial Tree",

                    description: " Tree Memorial: {MEMORIAL} <br/>Tree Variety: {TREE_VARIETY} <br/>Tree Species: {TREE_SPECIES} Tree Species <br/> <img src={TLINK}  height =100px  width=100px alt=\"No image to display\" />",

                    //description1:"{TREE_SPECIES }: Tree Species",

                    fieldInfos: [{ //define field information 

                        fieldName: "TREE_SPECIES",

                        label: "Type"

                    }, {

                        fieldName: "TREE_VARIETY",

                        label: "Type"

                    }],

                    mediaInfos: [{ //define the template 

                        caption: "",

                        type: "",

                        value: {

                            theme: "",

                            fields: ["TREE_SPECIES", "TREE_VARIETY"]

                        }

                    }]

                });

                var basemap = new ArcGISTiledMapServiceLayer("https://gistest2.bgsu.edu/arcgis/rest/services/Basemap/Basemap/MapServer");

                map.addLayer(basemap);

                // this layer is for tree icons

                var usaLayer = new ArcGISDynamicMapServiceLayer("https://gistest2.bgsu.edu/arcgis/rest/services/MemorialTrees/MemorialTEST/MapServer/", {

                    opacity: 0.7,

                    visible: false

                });

                usaLayer.setVisibleLayers([2]);

                map.addLayer(usaLayer);

                // this is for data to be retrived and show in the template

        var featureLayer = new FeatureLayer("https://gistest2.bgsu.edu/arcgis/rest/services/MemorialTrees/MemorialTrees/MapServer/0", {

                    mode: FeatureLayer.MODE_ONDEMAND,

                    outFields: ["MEMORIAL", "TREE_VARIETY", "TREE_SPECIES", "TLINK"],

                    infoTemplate: template

                });

                map.addLayer(featureLayer);

               

                // search widget

                var search = new Search({

                 map: map,

                 sources: [],zoomScale: 5000000}, "search");

                

                  //listen for the load event and set the source properties

         search.on("load", function () {

            var sources = search.sources;

            sources.push({

               featureLayer: featureLayer,

               placeholder: "Search Memorial Trees",

               enableLabel: false,

               searchFields: ["MEMORIAL"],

               displayField: "MEMORIAL",

               exactMatch: false,

               outFields: ["MEMORIAL", "TREE_SPECIES", "TREE_VARIETY"]

            });

            //Set the sources above to the search widget

            search.set("sources", sources);

         });

         search.startup();

      });

   </script>

</head>

<body>

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

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

</body>

</html>

Thanks!

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Shruthi,

  There is a bug in the current Search Widget that has to be worked around by adding maxResults and setting it to a string. This workaround is discussed here:

Search: "Pagination is not supported."

        sources.push({
          featureLayer: featureLayer,
          placeholder: "Search Memorial Trees",
          enableLabel: false,
          searchFields: ["MEMORIAL"],
          displayField: "MEMORIAL",
          exactMatch: false,
          outFields: ["MEMORIAL", "TREE_SPECIES", "TREE_VARIETY"],
          maxResults: "Foo"
        });

View solution in original post

3 Replies
RobertScheitlin__GISP
MVP Emeritus

Shruthi,

  There is a bug in the current Search Widget that has to be worked around by adding maxResults and setting it to a string. This workaround is discussed here:

Search: "Pagination is not supported."

        sources.push({
          featureLayer: featureLayer,
          placeholder: "Search Memorial Trees",
          enableLabel: false,
          searchFields: ["MEMORIAL"],
          displayField: "MEMORIAL",
          exactMatch: false,
          outFields: ["MEMORIAL", "TREE_SPECIES", "TREE_VARIETY"],
          maxResults: "Foo"
        });
ShruthiR
New Contributor II

Thank you very much, it worked!

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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"