Discover the Search widget

24291
65
03-06-2015 05:59 PM
MattDriscoll
Esri Contributor

There’s a new way to easily search your mapping data.

The ArcGIS JavaScript API’s new Search dijit precedes the Geocoder dijit (now deprecated). It’s been re-imagined, renamed and redesigned to provide a single searching and suggestion experience. It allows you to search across multiple Locator and Feature Layer services from a simple interface.

Whereas the Geocoder dijit’s intention was for searching only Locator tasks, the Search dijit was designed to handle multiple types of “sources,” including Locator tasks, Feature Layers and potentially more. The user interface has also been improved to handle searching one more of these sources. With the Search dijit, you can search or get suggestions from all the defined sources or a single source.

Much of the same functionality found in the Geocoder widget is also present in the Search dijit, but many new features have been added and redesigned for a better user and developer experience. As a developer, it should be easier for you to configure the Search widget and less code to write in order to handle common searching tasks. The icons for the widget use a font, so properties like the color or size can easily be modified.

New Features include:

  • Ability to search and get suggestions from Feature Layers
  • Automatically add Feature Layers from a map to the widget
  • Display additional search results to a user in the popup as “more results”
  • Highlight a result with a symbol
  • Label a result with a text symbol.
  • Results for suggestions and searches are separated and have different events
  • Optional button-mode to expand or collapse the search interface from a single button
  • Easily set an InfoTemplate to display custom popup information for a result
  • Individual placeholders for each search source... and more

Have fun exploring the demos or implementing it in your app.

65 Replies
RobertScheitlin__GISP
MVP Emeritus

Ezequias,

  The suggest functionality that is used by the Search widget comes from the REST endpoint of the locator using the Suggest request. There seems to be not ability to change the search from anything other then a CONTAINS type search. This is something you need to add to the esri Ideas for an enhancement to ArcGIS Server.

BhavinSanghani
Occasional Contributor II

It looks like there is no way I can display suggest results from multiple databases (geodatabase and relational database). Before I modify suggestResults in suggest-results event, the suggestion menu appears on the screen. I am expecting that the suggestions menu appear after I send results from suggest-results event. That way, we can show aggregated results. Has it been designed to support this way? Any suggestions to implement this scenario? What would be the use of suggest-results event if it doesn't allow to modify suggestResults?

e.g. I am working on enterprise application. When user types in address then I want to show address suggestions from geocoding service. This works fine. Now, when suggestions are displayed then I want to show equipment data stored in enterprise database (such as oracle) in suggestions menu. I thought to fire another query to enterprise database in suggest-results event and aggregate the results. That way suggestions can be displayed from both the database. But it doesn't seem to be working that way.

0 Kudos
ChristopherJohnson1
Occasional Contributor II

Not sure if you still need a reply, but the link below might be helpful.

arcgis - esri/dijit/Search javascript version 3.13 different source not creating suggestions - Stack...

Thanks.

0 Kudos
BhavinSanghani
Occasional Contributor II

Thanks for replying.

Actually, I want to modify suggestions before it displays on the screen. I do not have problem with the server. I do get suggestions in suggest-results. But once I get suggestions in this event then I want to fire another query to another database, modify the suggestions and then display them on the screen.

But this doesn't seem to be supported by API. Because by the time, I modify the suggestions, they are displayed on the screen.

0 Kudos
ChristopherJohnson1
Occasional Contributor II

Ah...OK.  Thanks.

0 Kudos
DrorElgabsi
New Contributor II

Hi, 

,I need to search items in my GraphicsLayer

 one thing came to mind is to create feature layer from my graphics layer, and add it to the the search widget...

my problem is that I have no results

 I used the following code for the transformation: (testing code)

function CreateFeatureGraphics(graphics) {
                    var x = [];
                    graphics.forEach(function (g) {
                        var item =
                            {
                                geometry: g.geometry,

                                attributes:
                                {
                                    ObjectID: g.id,
                                    Name: g.attributes.Name
                                }
                            };
                        x.push(item);

                    });
                    return x;
                }

                function CreateLayer(graphics) {

                    var g = CreateFeatureGraphics(graphics.items);
                         var fields = [
                      {
                          name: "ObjectID",
                          alias: "ObjectID",
                          type: "oid"
                      }, {
                          name: "Name",
                          alias: "Name",
                          type: "string"
                      }];
                    lyr = new FeatureLayer({
                        source: g,                       
                        fields: fields, 
                        objectIdField: "ObjectID", 
                        spatialReference: {
                            wkid: 4326
                        },
                        geometryType: "point", 
                        popupTemplate: template
                    });
                         
                    return lyr;
                }

                function UpdateSearch() {
                    var src =
                           [{
                               featureLayer: CreateLayer(dataLayer.graphics),
                               searchFields: ["ObjectID"],
                               displayField: "NAME",
                               exactMatch: false,
                               outFields: ["*"],
                               name: "Local Items",
                                      suggestionsEnabled: true,
                               placeholder: "Pole 1522"
                           },
                           {
                               locator: new Locator("//geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"),
                               singleLineFieldName: "SingleLine",
                               outFields: ["Addr_type"],
                               name: "Adress"
                           }
                           ];  //new source
                    app.searchWidget.sources = src;
                         console.log(app.searchWidget);
                    app.searchWidget.startup();
                }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos