Search Widget (JSAPI 4.25) Event Handlers When Using Suggestions

[Arne_Gelfert]

In the process of migrating an app I had built using JSAPI 3.x  to 4.x.

Trying to understand why my 'Search' widget shows  following events for character as I enter them...

• "search-focus"
• "suggest-start"
• "suggest_complete"

Until I hit my "minCharaters" of 3 suggestion configured in the "SearchSources" and suggestions are displayed. When I now click on one of the suggestions, I get events:

• "search-blur"
• "search-focus"
• "search-start"

 But I never see a "search-complete" that would allow me to grab the selected records and its attributes. Instead I get an error:

Search.js:15 Uncaught TypeError: Cannot read properties of undefined (reading 'remove')
    at N.clearGraphics (Search.js:15:492)
    at N.search (Search.js:16:88)
    at D.search (Search.js:147:168)
    at D._handleSuggestionClick (Search.js:169:123)
    at Object.handleInterceptedEvent ((index):2486:380)
    at HTMLLIElement.<anonymous> ((index):2502:456)

Since this looks graphics related, I made sure that I have 

resultGraphicEnabled: false,

in my Search() configuration. I had some custom CSS to tweak where this widget lives. But I rolled that back also and it seems to not have fixed things.

Any idea what might be going on here and why I'm seeing this graphics error? Thanks.

[ReneRubalcava]

Do you have a codepen or github repo sample of the issue? Are you trying go get the search result only after you select from suggestions? Or do you want the suggestions? A repro sample would help with your error. Here is the list of events on the Search widget

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Search.html#events-summar...

[Arne_Gelfert]

Thanks for chiming in, Rene! I find myself in good hands then!! 😀

I'm trying to replicate what I was doing in 3.x although the events seemed to have changed. I want to display the suggestions and then when you select one (click on it), I want to grab that record from the event.

From what I can tell, I was using "search-results" in 3.x with WebAppBuilder. That seems to have been dropped in favor of "search-complete"?

Don't have my code in a form that I can readily copy paste into CodePen. That would take some stripping down. What I find is that I can get Search() to work in a minimal app with just a Search widget. So it's not related to the service I'm searching or browser etc.

What I'm doing is putting the Search widget inside another DOM element that I'm adding to view.ui. That all works great and I get a widget and suggestions. So I see those other events triggered. (I took each documented event and tried to catch it. ) I suspect that the event handler tied to the <li> item in the <ul> of suggestions is messed up because of some CSS changes I made to arrange the Search window. Don't know what change that is specifically. But that's the only difference besides Search being wrapped in another HTML element that I can think of. So I would love to know how I can confirm this and find a work-around.

Of course, the error referencing some minified code doesn't help.

[ReneRubalcava]

I'm not sure what changes you may have made, but if you only care about the selected result, you can just listen for the search-complete event, and ignore anything else.

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Search.html#event-search-...

Lots of changes between 3x and 4x, events are completely different.

[JoelBennett · Accepted solution]

The problem indicated by the error message occurs when accessing the graphics property of the Search widget's view property.  Basically it's saying the view's graphics property is undefined.  I can only think of two cases where this could happen: (1) the view is not ready when this occurs, or (2) the widget's view property is not set to an instance of MapView (or SceneView).

When you create your Search widget, it probably looks something like:

var search = new Search({
    //etc
    view: view
    //etc
});

 What are you passing to the view property?

[Arne_Gelfert]

Thanks, guys! @ReneRubalcava - well, "search-complete" is the one I'm having trouble with. 😁

@JoelBennett - Thank you! I understood the view property... but since I have my code spread over multiple JS files and am passing view into a function that sets up the Search(), your comment had me take another look and if I pass in a document.getElementById('viewDiv')... it works! I wasn't seeing the forest for the trees! I can sleep soundly now. Thanks!