Discover the Search widget

[MattDriscoll]

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.

[JohnRitsko]

Matt,

What would I set the constructor to for the activeSourceIndex? (1?).  I have my sources in the var sources array and I want to use the 1st one in there which is my own local address geocoder.  I did manage to only show the services I want to search, thank you for that.  Do I have create multiple sources?  Your input is greatly appreciated.

  Also, when using my own geocoder and I type in an address I get the suggestions.  From what I'm reading I can't get that unless my server is on 10.3.  Am I correct in thinking that? If so is there another way to get address suggestions?

Thanks again,

John

[MattDriscoll]

Hey John,

Try setting it to 0. Zero should be the first index for the sources array. If you only have one source set on the widget and you're not just pushing it to sources then you shouldn't have to specify the index.

Yes, you need a locator that supports the suggest operation in order to get suggestions. If you want suggestions with a feature layer, the layer needs to support pagination.

Hope that helps.

-Matt

[deleted-user-RAnWn8DDSd1P]

Is there a way to get this widget to return suggestions as the user is typing when hitting a /findAddressCandidates service like esri/dijit/Geocoder does with showResults?  It seems like my only ticket to suggestions while typing is enableSuggestions: true, whereby it wants to send requests to every service via /suggest?text=.  If I have enableSuggestions: false for the members of my sources array that don't support suggestions (our 10.2 locators) then I don't get results while typing?  I'm trying to move to new widget because of the deprecated mention, even though esri/dijit/Geocoder continues to work in 3.13, and was hoping to have it suggest like the old geocoder.

[MattDriscoll]

Hi Aaron,

Unfortunately, no. The service needs to have support for suggestions. It won't use findAddressCandidates for handling suggestions like the Geocoder widget does.

[DaveHighness]

I am trying to figure out how to make the Search Widget a little bit narrower, by about 50px. I can't seem to figure out the right combination of css classes to make that happen correctly. Any help?

[MattDriscoll]

Hi Dave, you should be able to modify the width of the input box element to get it to the size you would like. It has a class on it. "searchInput".

[DaveHighness]

I've tried changing the width of 'arcgisSearch', 'searchGroup', 'searchInput' and 'searchInputGroup' and I'm unable to get the entire widget to reduce in size all together. I need to get the whole widget down to about 250px. Setting 'searchInputGroup' to 'width:200px' appears to reduce the width but it's goofing things up too, like I'm loosing the search icon from the right side. It seems like I need to resize several of the constituent components to do this but can't figure out which ones.

[JohnRitsko]

Dave,

I use a div called "searchStops" then I attribute that so the Search widget. then in the CSS you can set the width (#searchStops { width: 250px; }).

[DaveHighness]

You mean you contain it within a div with id "searchStops" and give that div a width of 250px? I've tried that and what happens is the search button on the right side of the widget wraps to the next line down.

It seems like I need to shrink everything to the left of the "searchClose"/"searchSpinner". It seems as though I can't get the "searchInput" text input box to shrink, it stays 237px no matter what I've tried.

[RichardWinkelbauer]

I have been able to narrow the search widget with the following css:

.searchInputGroup .searchInput

{

    width: 150px !important;

}

I don't really like using "!important" but haven't been able to track down how to get this piece to work without it.

Rich