Customizing Search Result Renderer

LizEidsness

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<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"search-complete"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN>
  <SPAN class="comment token">// The results are stored in the event Object[]</SPAN>
  console<SPAN class="punctuation token">.</SPAN><SPAN class="token function">log</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"Results of the search: "</SPAN><SPAN class="punctuation token">,</SPAN> event<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

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

Noah Sager

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