How to format or modify the suggestResults in esri arcGIS

altair — Wed, 22 Dec 2021 12:52:27 GMT

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

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-customsource

resource:

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

Re: How to format or modify the suggestResults in esri arcGIS

ReneRubalcava — Wed, 22 Dec 2021 21:44:41 GMT

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: `${feature.properties.label}`, sourceIndex: params.sourceIndex }; });

Re: How to format or modify the suggestResults in esri arcGIS

altair — Wed, 22 Dec 2021 22:50:15 GMT

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

Re: How to format or modify the suggestResults in esri arcGIS

ReneRubalcava — Wed, 22 Dec 2021 22:45:24 GMT

If you need multiple lines, you can add a " " or "" tags.

Re: How to format or modify the suggestResults in esri arcGIS

altair — Wed, 22 Dec 2021 23:01:53 GMT

`${feature.name} ` +

`+ ${feature.details} + ` it works in result suggestion but it affects the functionality when pointing in map

topic Re: How to format or modify the suggestResults in esri arcGIS in ArcGIS JavaScript Maps SDK Questions

How to format or modify the suggestResults in esri arcGIS

Re: How to format or modify the suggestResults in esri arcGIS

Re: How to format or modify the suggestResults in esri arcGIS

Re: How to format or modify the suggestResults in esri arcGIS

Re: How to format or modify the suggestResults in esri arcGIS