search widget source problems

Question

hey im trying to use a search widget, with the ESRI JS API 4. the source im using is a layer in the webmap.

using the layer (find by name) is painfully slow but it only have 250 features. adding the layer as a feature layer to the webmap(instead of an item) solves the problem but then its not grouped and is above relevant layers.

am i using the widget wrong? can i do anything to better the search time?

if not- is there a way to move feature layers under items in the webmap?

can i group the layer myself?(the other layer grouped is huge and wont draw fully as a featureLayer so i want to group it as a mapImageLayer while keeping the source as a feature layer) heres the code i use:

import Layer from "@arcgis/core/layers/Layer";
import MapView from "@arcgis/core/views/MapView";
import Search from "@arcgis/core/widgets/Search";

export default function AddSearchWidget(view: MapView, layer: Layer) {
  const source = {
    name: "river status",
    layer: layer,
    searchFields: ["label"],
    displayField: "label",
    exactMatch: false,
    outFields: ["label"],
    placeholder: "For example: Nile river"
  };

const searchWidget = new Search({
    view: view,
    //activeSourceIndex:-1,
    allPlaceholder: "address river name",
    sources: [source]
  });
  // Adds the search widget below other elements in
  // the top left corner of the view
  view.ui.add(searchWidget, {
    position: "top-right",
    index: 2
  });
}

litch · Answer

almost,
the bottom(third) search widget layer, is a featureLayer LayerSearchSource that is not a part of the webmap.
Also the feature found is the correct one, my problem is with the different popup.

a big problem with the the second scenario is i cant really pick the feature, There are no suggestions or they are very slow.

no multiple search widgets in the actual app.

here's an image of the webmap, the red line is for the featureLayer used in the search widget,
and the yellow is for the sublayer.

just to make sure, they all use the same URL(source you can see on the third widget in the snippet.)

Noah Sager · Answer

Ok, let me see if I understand correctly.

Top Search widget in the gif. The first scenario works as expected. This is adding a FeatureLayer as a LayerSearchSource to the Search widget. This FeatureLayer is being called via URL, and is a layer in the webmap.

Middle Search widget in the gif. The second scenario is not working as expected. There are no suggestions being populated, or the suggestions are populated, but it's very slow. This is searching the webmap for a layer with a specific name (it's a sublayer of a MapImageLayer added to the webmap).

Bottom Search widget in the gif. The third scenario is not working as expected. The popup looks different from the other two scenarios, and the feature that is searched for changes every time. This is adding a FeatureLayer as a LayerSearchSource to the Search widget. This FeatureLayer is being called via URL, and is a layer in the webmap.

Did I understand correctly? Are you using multiple Search widgets in the actual app, or was that to demonstrate the issue?

litch · Answer

hey @Noah-Sager,
so this is a GIF i made to show my problem,
i called the AddSearchWidget function from the previous post 3 times, each time calling a different layer.
first call was the search widget with a feaureLayer added in the webmap,(add a url from the web option).
second call was "search this name in my layer list", its the same layer from the webmap(sublayer of an item which added a mapImageLayer).
the third call is what you suggested, i created a featureLayer outside the webmap(same url as the first featurelayer added to the webmap).

this gif is the result, the code is the same for all the layers but the mapimagelayer is slow(not even responsive in this short gif) and also even tho the code is the same(same function running all the layers) the search result is different every time(same feature but the popup change).

im trying to get the full popup, and the speedy search suggestions.

const niturService= list.items.find(function(layer:Layer) {
      return layer.title === "SearchTest";
    })
    AddSearchWidget(view, niturService);
  /////////////////////////////////////////////////////////////////////////////////////

const niturService2= list.items.find(function(layer:Layer) {
    return layer.title === "סטטוס זיהום נחלים";
  })
  AddSearchWidget(view, niturService2);
/////////////////////////////////////////////////////////////////////////////////////
  const testFL = new FeatureLayer({
    url: "https://prd-esri.sviva.gov.il/arcgis/rest/services/rivers/Layers1/MapServer/2",
    outFields: ["*"]
  });
  AddSearchWidget(view, testFL);

search widget test(Same code diffrent sources)