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.

[DaveHighness]

Thanks Richard! That works. ESRI, please make this easier!

[MattDriscoll]

You shouldn't have to use important. You just need to make sure the CSS statement is more specific.

This should work:

.esriSearch .esriContainer .esriInput {
    width: 150px;
}

or something like this

.myClass .esriSearch .esriContainer .esriInput {
    width: 150px;
}

[sumitzarkar]

Matt Driscoll​

I tried Changing width by above classes but it didn't work, however i tried the following one and it is working.

.myclass .arcgisSearch .searchGroup .searchInput{

     width: 150px;

}

please suggest if this is correct approach.

[JohnRitsko]

This is right.  If you select the element while debugging you will find:

.arcgisSearch .searchGroup .searchInput   (with a width) associated with it.  I changed the value as Sumit has and it worked for me as well.  It's defaulted in the esri.css so if you override that with your own CSS you should be good.

[JssrRR]

Matt,

Is there a way to add  source country code to be only USA, in Search to it's default locator, without having to define a locator for USA  in sources?

Thanks,

[MattDriscoll]

Yep. You can just set it on the default source.

search.sources[0].countryCode = "US";

[JssrRR]

Matt,

Thanks, it worked.I had to change the index number of the source layer to correspond to the order in my application.

[CemAkkus2]

Hi Matt,

I used this restriction and it works for geocoding. However, autoComplete is still bringing the suggestions outside of the US. How can I restrict suggestions to US?

Thanks,

Cem

[MarshallRobinson]

Seems like this solution is working for others, but when I try this, the submit button hangs out in it's original location, leaving empty space between it and the input box. So, the submit button still wraps on smaller screens. Is there something I'm doing incorrectly? Thanks in advance.

[JonathanBailey]

How do you get the widget to default to "All"?