This sample demonstrates how to create a custom search source to use the with the Search component. The Search component provides the capability to provide search capabilities to third-party services. The level of detail (LOD) at the center of the map depends on the data source, with higher quality data sources returning extents closer to the feature obtained from the search.
To use a custom source with the search component, you must set the component's sources property with your own custom source.
To create a custom search source, you need to construct a search source with on object containing two functions, getSuggestions and getResults.
In these two functions, you can determine how to return a list of suggestions to display in the Search component and how to obtain and return the results.
const customSearchSource = new SearchSource({ placeholder: "example: 8 Boulevard", // Provide a getSuggestions method // to provide suggestions to the Search component getSuggestions: (params) => { // You can request data from a // third-party source to find some // suggestions with provided suggestTerm // the user types in the Search component return esriRequest(url + "search/", { query: { q: params.suggestTerm.replace(/ /g, "+"), limit: 6, lat: viewElement.center.latitude, lon: viewElement.center.longitude, }, responseType: "json", }).then((results) => { // Return Suggestion results to display // in the Search component return results.data.features.map((feature) => { return { key: feature.properties.id, text: feature.properties.label, sourceIndex: params.sourceIndex, }; }); }); }, // Provide a getResults method to find // results from the suggestions getResults: (params) => { // If the Search component 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 component can display const graphic = new Graphic({ geometry: new Point({ x: feature.geometry.coordinates[0], y: feature.geometry.coordinates[1], }), attributes: feature.properties, }); // Create a buffer to apply to the search result. // Optionally, you can provide an extent for // a point result, so the view can zoom to it const buffer = geodesicBufferOperator.execute(graphic.geometry, 120, { unit: "meters", }); // Return a Search result using the buffer's extent const searchResult = { extent: buffer.extent, feature: graphic, name: feature.properties.label, }; return searchResult; }); // Return an array of Search Results return searchResults; }); }, });