How to format or modify the suggestResults in esri arcGIS

688
4
12-22-2021 02:20 AM
altair
by
New Contributor III

I have a question regarding in esri arcGIS search widget. How to modify the search suggestionResult? this is the current design for the suggestResult

altair_0-1640177526991.png

 

what i mean in modifying the suggestResult is, add html file

const customSearchSource = new SearchSource({
placeholder: "example: 8 Boulevard du Port",
// Provide a getSuggestions method
// to provide suggestions to the Search widget
getSuggestions: (params) => {
// You can request data from a
// third-party source to find some
// suggestions with provided suggestTerm
// the user types in the Search widget
return esriRequest(url + "search/", {
query: {
q: params.suggestTerm.replace(/ /g, "+"),
limit: 6,
lat: view.center.latitude,
lon: view.center.longitude
},
responseType: "json"
}).then((results) => {
// Return Suggestion results to display
// in the Search widget
return results.data.features.map((feature) => {
return {
key: "name",
text: feature.properties.label,
sourceIndex: params.sourceIndex
};
});
});
},
// Provide a getResults method to find
// results from the suggestions
getResults: (params) => {
// If the Search widget passes the current location,
// you can use this in your own custom source
const operation = params.location ? "reverse/" : "search/";
let query = {};
// You can perform a different query if a location
// is provided
if (params.location) {
query.lat = params.location.latitude;
query.lon = params.location.longitude;
} else {
query.q = params.suggestResult.text.replace(/ /g, "+");
query.limit = 6;
}
return esriRequest(url + operation, {
query: query,
responseType: "json"
}).then((results) => {
// Parse the results of your custom search
const searchResults = results.data.features.map((feature) => {
// Create a Graphic the Search widget can display
const graphic = new Graphic({
geometry: new Point({
x: feature.geometry.coordinates[0],
y: feature.geometry.coordinates[1]
}),
attributes: feature.properties
});
// Optionally, you can provide an extent for
// a point result, so the view can zoom to it
const buffer = geometryEngine.geodesicBuffer(graphic.geometry, 100, "meters");
// Return a Search Result
const searchResult = {
extent: buffer.extent,
feature: graphic,
name: feature.properties.label
};
return searchResult;
});

// Return an array of Search Results
return searchResults;
});
}
});

https://developers.arcgis.com/javascript/latest/sample-code/sandbox/?sample=widgets-search-customsou...

resource:

https://developers.arcgis.com/javascript/latest/sample-code/widgets-search-customsource/

4 Replies
ReneRubalcava
Frequent Contributor

You can do this with a custom source where you override the "getSuggestions()" method.

https://codepen.io/odoe/pen/oNGGZpY?editors=1000

return results.data.features.map((feature) => {
    return {
        key: "name",
        // HTML in return text
        text: `<span class="my-suggest"><i>${feature.properties.label}</i></span>`,
        sourceIndex: params.sourceIndex
    };
});
0 Kudos
altair
by
New Contributor III

How about multiple line? I just want to display in resultSuggestion is not just the label, but the whole detail 

 

0 Kudos
ReneRubalcava
Frequent Contributor

If you need multiple lines, you can add a "<br>" or "<p>" tags.

0 Kudos
altair
by
New Contributor III
`<span class="my-suggest"><i>${feature.name}</i></span><br>` +
`+ ${feature.details} + ` it works in result suggestion but it affects the functionality when pointing in map
0 Kudos