Customizing Search Result Renderer

434
3
Jump to solution
06-15-2020 10:46 AM
LizEidsness
New Contributor III

I have seen in the API documentation a reference to SearchResultRenderer class.

SearchResultRenderer | ArcGIS API for JavaScript 4.15 

In addition, I have seen examples where after a search, popup displays "more results".  

I'd like to display that "more results" menu separately from a popup.  Preferably as a list of results before the user pics one.  I have not seen an example where this is done - I'm wondering if anyone has an example I could look at - or if you know how I might leverage that class/something else to create a list in a new location.

I know how to do this:

searchWidget.on("search-complete", function(event){
  // The results are stored in the event Object[]
  console.log("Results of the search: ", event);
});

I'm looking for a better way - I'm wondering if SearchResutRenderer might be it or something else.

0 Kudos
1 Solution

Accepted Solutions
Noah-Sager
Esri Regular Contributor

Great question Liz Eidsness‌. You can use the SearchResultRenderer class to do exactly this. The trick is to make sure the viewModel on the SRR is set to the same viewModel as from the Search widget. And you'd probably want to set the showMoreResultsOpen property to `true`. I made an example that (crudely) demonstrates the functionality. If you search for "Plymouth" and hit enter (do not select a suggestion) you'll see the more results in the lower right.

SearchResultRenderer with `next`

https://codepen.io/noash/pen/NWxRbXq 

View solution in original post

3 Replies
Noah-Sager
Esri Regular Contributor

Great question Liz Eidsness‌. You can use the SearchResultRenderer class to do exactly this. The trick is to make sure the viewModel on the SRR is set to the same viewModel as from the Search widget. And you'd probably want to set the showMoreResultsOpen property to `true`. I made an example that (crudely) demonstrates the functionality. If you search for "Plymouth" and hit enter (do not select a suggestion) you'll see the more results in the lower right.

SearchResultRenderer with `next`

https://codepen.io/noash/pen/NWxRbXq 

LizEidsness
New Contributor III

Thanks!  I was having trouble figuring out how they fit together.

Noah-Sager
Esri Regular Contributor

That's good feedback, we'll improve the doc to make this more obvious.

0 Kudos