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
Solved! Go to Solution.
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>
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>
That's exactly what I need, thanks a lot Chris!