Search component with custom source

GaryB

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

Noah-Sager

Hi @GaryB, thanks for posting your question here. Since you're using a layer as the source in the example, it seems like you should use the LayerSearchSource instead of a custom source. Custom source is designed for 3rd party sources.

Here is an example of LayerSearchSource: https://developers.arcgis.com/javascript/latest/sample-code/search-component-multisource/

Here is an example of a custom source: https://developers.arcgis.com/javascript/latest/sample-code/search-component-customsource/

And here is an example of using the layer from your app with LayerSearchSource: https://codepen.io/noash/pen/EaPxjQo?editors=1000

GaryB

Thank you for your response @Noah-Sager. I should perhaps be more clear on what I'm trying to accomplish. Given a field in a feature layer, after the user types the min suggested characters, I want them to be presented with the list of unique values observed in the data. I think that's pretty clear and is what's already happening in both my example and your example. However, what I really want to do is get back the value that the user selected and do something with it. My example prints the value to the console (but it's always the first value and not the one they selected) whereas your example zooms to the selected elements. Perhaps I'm going about this all wrong. much appreciated!

Noah-Sager

My apologies @GaryB, I misunderstood. Hopefully, if I understand correctly now, what you want is the arcgisSelectResult event:
https://developers.arcgis.com/javascript/latest/references/map-components/arcgis-search/#arcgisSelec...

This event will fire when the user selects a result from the suggestions. Here is an example that prints the selected suggestion to the browser Console:
https://codepen.io/noash/pen/EaPxPRK?editors=1000