Hello,
I'm trying to use a layer as a custom source for a search component and am unable to get it working. I did have this working without components in older versions of the API but having no luck now. In a nutshell the custom layer source is looking at one field to bring back values seen. If for example you type MBTA in the search window you should see many options, but regardless of which one I select it always returns the first one (currently printing to the console window). There's probably an easy solution but I just cant get it working. Thanks!
import './style.css'
import FeatureLayer from '@arcgis/core/layers/FeatureLayer.js'
import LayerSearchSource from '@arcgis/core/widgets/Search/LayerSearchSource.js'
import "@arcgis/map-components/components/arcgis-map";
import '@arcgis/map-components/components/arcgis-search'
const arcgisMap = document.querySelector('arcgis-map')
arcgisMap.addEventListener('arcgisViewReadyChange', (event) => {
let MapComponent = event.target
// ADD THE LAYER
let railLayer = new FeatureLayer({ url: 'https://services.arcgis.com/xOi1kZaI0eWDREZv/arcgis/rest/services/NTAD_North_American_Rail_Network_Lines/FeatureServer/0' })
MapComponent.map?.add(railLayer)
// SET UP THE CUSTOM SEARCH SOURCE
let railSubdivSearchSource = new LayerSearchSource({
layer: railLayer,
placeholder: 'MBTA',
searchFields: ['SUBDIV'],
displayField: 'SUBDIV',
name: 'Subdiv',
minSuggestCharacters: 4,
getSuggestions: (params) => {
let query = railLayer.createQuery()
query.outFields = ['SUBDIV']
query.returnGeometry = false
query.returnDistinctValues = true
query.where = `SUBDIV like '%${params.suggestTerm}%'`
return railLayer.queryFeatures(query).then((featureSet) => {
let myresult = featureSet.features.map((feature) => {
return {
key: 'name',
text: feature.attributes['SUBDIV'],
sourceIndex: params.sourceIndex
}
})
return myresult
})
},
getResults: (params) => {
// ****** if you look in the console you will see it always returns the first item
console.log(`did you really choose: ${params.suggestResult.text}?`)
}
})
let arcgisCustomSearch = document.getElementById('arcgis-custom-search')
arcgisCustomSearch.sources.add(railSubdivSearchSource)
})
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Custom Search Issue</title>
<link rel="icon" href="data:;base64,=" />
</head>
<body>
<arcgis-map basemap="gray" center="-100, 34.027" zoom="4">
<arcgis-search id="arcgis-custom-search" include-default-sources-disabled></arcgis-search>
</arcgis-map>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
I've also posted the code here as well: https://github.com/VolpeUSDOT/search-component-question
