How to add button on each suggestion of search ?

FlavieMORAUX1 · ‎01-16-2018

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: <strong>Nom:</strong> ${nom_veloroute}",

Result in webapp:

I see nothing at Search component level for that... do you have an idea?

Thanks,

Flavie

ChrisSmith7 · ‎01-17-2018

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/FeatureServ..."),
 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}</br>Name: ${NAME}</br>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}</br>State: ${State}</br>Party Affiliation: ${Party}</br>Phone No: ${Phone_Number}<br><a href=${Web_Page} target=_blank ;'>Website</a>"
 ),
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,'<strong>Name:</strong>')
 $(this).after($('<input type="button" onclick="alert(\'' + $(this)[0].textContent + '\');" value="Click me">'));
 });
 });
});
 </script>
</head>
<body>
 <div id="search"></div>
 <div id="map"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

ChrisSmith7 · ‎01-17-2018

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/FeatureServ..."),
 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}</br>Name: ${NAME}</br>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}</br>State: ${State}</br>Party Affiliation: ${Party}</br>Phone No: ${Phone_Number}<br><a href=${Web_Page} target=_blank ;'>Website</a>"
 ),
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,'<strong>Name:</strong>')
 $(this).after($('<input type="button" onclick="alert(\'' + $(this)[0].textContent + '\');" value="Click me">'));
 });
 });
});
 </script>
</head>
<body>
 <div id="search"></div>
 <div id="map"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

FlavieMORAUX1 · ‎01-19-2018

That's exactly what I need, thanks a lot Chris!