How to add button on each suggestion of search ?

Question

Hy, I want to add button on each suggestion line in Search component. In this way user can trigger a specific treatment if he want. I try to put HTML code into property "suggestionTemplate" of Search component, but HTML code is not interpreted. HTML code is displayed... I tried with strong HTML balise. Sample of code : suggestionTemplate: Nom: ${nom_veloroute}", Result in webapp: I see nothing at Search component level for that... do you have an idea? Thanks, Flavie

ChrisSmith7 · Accepted Answer

Here's a little hack that might get you in the right direction: <!DOCTYPE html> <html dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> <title>ArcGIS API for JavaScript | Search widget with multiple sources</title> <link rel="stylesheet" href="https://js.arcgis.com/3.23/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css"> <style> html, body, #map { height: 100%; width: 100%; margin: 0; padding: 0; } #search { display: block; position: absolute; z-index: 2; top: 20px; left: 74px; } .searchMenu.suggestionsMenu>div>ul>li { display: block; white-space:pre; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://js.arcgis.com/3.23/"></script> <script> require([ "esri/map", "esri/dijit/Search", "esri/layers/FeatureLayer", "esri/InfoTemplate", "dojo/on", "dojo/domReady!" ], function(Map, Search, FeatureLayer, InfoTemplate, on) { var map = new Map("map", { basemap: "gray", center: [-97, 38], // lon, lat zoom: 5 }); var search = new Search({ enableButtonMode: true, //this enables the search widget to display as a single button enableLabel: false, enableInfoWindow: true, showInfoWindowOnSelect: false, map: map }, "search"); var sources = search.get("sources"); //Push the sources used to search, by default the ArcGIS Online World geocoder is included. In addition there is a feature layer of US congressional districts. The districts search is set up to find the "DISTRICTID". Also, a feature layer of senator information is set up to find based on the senator name. sources.push({ featureLayer: new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/CongressionalDistricts/FeatureServer/0"), suggestionTemplate: "Name: ${NAME}", searchFields: ["DISTRICTID"], displayField: "DISTRICTID", exactMatch: false, outFields: ["DISTRICTID", "NAME", "PARTY"], name: "Congressional Districts", placeholder: "3708", maxResults: 6, maxSuggestions: 6, //Create an InfoTemplate and include three fields infoTemplate: new InfoTemplate("Congressional District", "District ID: ${DISTRICTID}
Name: ${NAME}
Party Affiliation: ${PARTY}" ), enableSuggestions: true, minCharacters: 0 }); sources.push({ featureLayer: new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/US_Senators/FeatureServer/0"), searchFields: ["Name"], displayField: "Name", exactMatch: false, name: "Senator", outFields: ["*"], placeholder: "Senator name", maxResults: 6, maxSuggestions: 6, //Create an InfoTemplate infoTemplate: new InfoTemplate("Senator information", "Name: ${Name}
State: ${State}
Party Affiliation: ${Party}
Phone No: ${Phone_Number}
Website" ), enableSuggestions: true, minCharacters: 0 }); //Set the sources above to the search widget search.set("sources", sources); search.startup(); on(search,'suggest-results', function(e) { $('.suggestionsMenu ul[role="menu"] li').each(function() { $(this)[0].innerHTML = $(this)[0].innerHTML.replace(/Name:/g,'Name:') $(this).after($('+ $(this)[0].textContent + '\');" value="Click me">')); }); }); }); </script> </head> <body> <div id="search"></div> <div id="map"></div> </body> </html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍