topic Re: Discover the Search widget in ArcGIS JavaScript Maps SDK Questions

Discover the Search widget

MattDriscoll — Sat, 07 Mar 2015 01:59:04 GMT

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.

Re: Discover the Search widget

khairulamri — Sun, 08 Mar 2015 02:51:05 GMT

Hi Matt

this is really cool, the app code will be more clean due to the less code.

Re: Discover the Search widget

williamcarr — Tue, 10 Mar 2015 15:10:18 GMT

Do you think we will ever be able to use the new Search dijit with Directions similar to locator services? That would take a lot of the trouble out of constant rebuilds.

Re: Discover the Search widget

MattDriscoll — Mon, 16 Mar 2015 16:05:26 GMT

Yep, the plan is to integrate it into the directions widget.

Re: Discover the Search widget

RyanRyherd1 — Fri, 10 Apr 2015 14:39:56 GMT

I've been testing this widget with one of my feature layers and everything seems to work great. However, I am having trouble displaying "More Results" in the popup. If I define the infoTemplate with a wildcard "${*}", it displays everything, including "More Results" but not formatted the way I would like. The default seems to display the subsequent results using the ESRI World Geocoder, but I can't seem to get them to display when searching on my own feature layer. Is there something that needs to be added to the content for the infoTemplate to get the "More Results" to show up?

Re: Discover the Search widget

MattDriscoll — Fri, 10 Apr 2015 15:56:18 GMT

Hey Ryan,

Here's how it's formatted by default in an InfoTemplate.

new InfoTemplate(i18n.widgets.Search.main.searchResult, "<div class=\"${searchTheme}\"><div id=\"${searchMoreResultsId}\" class=\"${searchMoreResults}\"><div class=\"${searchMoreResultsItem}\">${searchResult}</div><div>${searchMoreResultsHtml}</div></div></div>")

You can customize it to get it looking how you want. Hope that is what you're looking for.

Re: Discover the Search widget

JohnRitsko — Wed, 22 Apr 2015 20:50:24 GMT

I have two things. First, can you point me to where I can see an example of how to use my own locator with the new dijit/Search. Below is what I use now with the geocoder and want to use this one.

locatorUrl = "";

I tried this but no luck:

sources.push({

locator: new Locator("),

singleLineFieldName: "SingleLine",

name: "Clark County Geocoding Service",

localSearchOptions: {

minScale: 300000,

distance: 50000

placeholder: "Search Local Geocoder",

maxResults: 3,

maxSuggestions: 6,

enableSuggestions: true,

minCharacters: 0

});

Second,

I do not want the default ESRI World Geocoder, is there a way to remove it as it causes issues when I try to search.

Thanks,

John

Re: Discover the Search widget

MattDriscoll — Thu, 23 Apr 2015 18:18:04 GMT

Hey John, That looks correct. Maybe the singleLineFieldName isn't correct? I'm seeing it as "Single Line Input" on your locator service.

You can set the sources on the widget's constructor and then it won't show the Esri world locator. or instead of pushing to sources, just set sources.

Re: Discover the Search widget

JohnRitsko — Thu, 23 Apr 2015 18:23:46 GMT

Matt,

Thanks for the correction to "Single Line Input", that fixed it.

Can I set one of the Sources to be my default?

Going to work on the "Set Sources" next.

Thanks so much,

John

Re: Discover the Search widget

MattDriscoll — Thu, 23 Apr 2015 18:26:37 GMT

Yep! Just set the constructor option for activeSourceIndex to whichever source index you'd like to be the default.

Re: Discover the Search widget

JohnRitsko — Mon, 27 Apr 2015 22:39:11 GMT

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

Re: Discover the Search widget

MattDriscoll — Mon, 27 Apr 2015 23:35:10 GMT

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

Re: Discover the Search widget

deleted-user-RAnWn8DDSd1P — Fri, 08 May 2015 16:15:31 GMT

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.

Re: Discover the Search widget

MattDriscoll — Tue, 12 May 2015 15:40:12 GMT

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.

Re: Discover the Search widget

DaveHighness — Fri, 14 Aug 2015 22:26:18 GMT

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?

Re: Discover the Search widget

MattDriscoll — Fri, 14 Aug 2015 22:53:04 GMT

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".

Re: Discover the Search widget

DaveHighness — Mon, 17 Aug 2015 14:42:00 GMT

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.

Re: Discover the Search widget

JohnRitsko — Mon, 17 Aug 2015 15:14:05 GMT

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

Re: Discover the Search widget

DaveHighness — Mon, 17 Aug 2015 15:42:22 GMT

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.

Re: Discover the Search widget

JonathanBailey — Mon, 17 Aug 2015 21:13:19 GMT

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