Neda,
Strange the search widget works for me with that change in your code. I turned off autosuggest (as it seems to have an issue with OID fields) is that what you mean does not work? When I type 34 in the widget and hit enter it take me to that tree. Here is the full code with corrections:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Interactive web map for CSULB Trees dataset</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
<link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.3/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/geometry/Extent",
"esri/layers/FeatureLayer",
"esri/widgets/Search",
"esri/widgets/Legend",
"esri/widgets/ScaleBar",
"dojo/domReady!"
], function(Map, MapView, Extent, FeatureLayer, Search, Legend, ScaleBar) {
var map = new Map({
basemap: "gray"
});
var initialExtent = new Extent({
xmin: -118.13,
xmax: -118.1,
ymin: 33.77,
ymax: 33.79
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 15,
center: [-118.114090, 33.783823],
extent: initialExtent
});
var template = {
title: "CSULB Tree Details, Tree ID: {tree_id}",
content: "<li>Common name: <b>{common_name}</b></li>" +
"<li>Scientific name: <b>{scientific_name}</b></li>" +
"<li>Genus: <b>{genus}</b> </li>" +
"<li>Specific epithet: <b>{specific_epithet}</b></li>" +
"<li>Cultivar subspecies: <b>{cultivar_subspecies}</b> </li>" +
"<li>Family: <b>{family}</b> </li>" +
"<li>Condition: <b>{condition}</b> </li>" +
"<li>Average of Trunk dbt: <b>{average_trunk_dbh_cm}</b></li>" +
"<li>Height: <b>{hight_m}</b> Meter</li>" +
"<li>Canopy height: <b>{canopy_height_m}</b> Meter</li>" +
"<li>Canopy width: <b>{canopy_width_m}</b> Meter</li>" +
"<li>Canopy shape: <b>{canopy_shape}</b> Meter</li>" +
"<li>Biomass Mt: <b>{biomass_mt}</b></li>" +
"<li>Co2 sequestration: <b>{co2_sequestration_kg}</b> Kg</li>" +
"<li>Owner: <b>{owner}</b> </li>" +
"<li>Photo: <b>{photo_urls}</b> Meter</li>" +
"<li>Date planted: <b>{date_planted}</b> </li>" +
"<li>ObjectId: <b>{objectid}</b> </li>",
fieldInfos: [{
fieldName: "canopy_width_m",
format: {
digitSeparator: true,
places: 0
}
}, {
fieldName: "average_trunk_dbh_cm",
format: {
digitSeparator: true,
places: 0
},
}]
};
var campus = new FeatureLayer({
url: "http://services3.arcgis.com/vq5vGR4r1YX7ueLg/arcgis/rest/services/CampusTreeLayers/FeatureServer/1?t...."
});
map.add(campus);
var tree = new FeatureLayer({
url: "http://services3.arcgis.com/vq5vGR4r1YX7ueLg/arcgis/rest/services/CampusTreeLayers/FeatureServer/0?t....",
outFields: ["*"],
popupTemplate: template
});
map.add(tree);
var search = new Search({
view: view,
sources: [{
featureLayer: tree,
searchFields: ["objectid"],
displayField: "objectid",
exactMatch: true,
outFields: ["*"],
name: "Tree FS",
placeholder: "Object ID",
maxResults: 6,
maxSuggestions: 6,
suggestionsEnabled: true,
minSuggestCharacters: 0
}]
});
view.ui.add(search, "top-right");
var legend = new Legend({
view: view,
layerInfos: [{
layer: campus,
title: "CSULB Campus Land covers"
}]
});
view.ui.add(legend, "bottom-left");
var scaleBar = new ScaleBar({
view: view,
unit: "non-metric"
});
view.ui.add(scaleBar, {
position: "bottom-left"
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
