Neda,
So this seems like what you are after then:
<SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN>DOCTYPE html<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>html<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>head<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>meta charset<SPAN class="operator token">=</SPAN><SPAN class="string token">"utf-8"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>meta name<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewport"</SPAN> content<SPAN class="operator token">=</SPAN><SPAN class="string token">"initial-scale=1, maximum-scale=1, user-scalable=no"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>title<SPAN class="operator token">></SPAN>Interactive web map <SPAN class="keyword token">for</SPAN> CSULB Trees dataset<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>title<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>style<SPAN class="operator token">></SPAN> html<SPAN class="punctuation token">,</SPAN> body<SPAN class="punctuation token">,</SPAN> #viewDiv <SPAN class="punctuation token">{</SPAN> padding<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> margin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> height<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN> width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> table<SPAN class="punctuation token">,</SPAN> th<SPAN class="punctuation token">,</SPAN> td <SPAN class="punctuation token">{</SPAN> border<SPAN class="punctuation token">:</SPAN> 1px solid black<SPAN class="punctuation token">;</SPAN> border<SPAN class="operator token">-</SPAN>collapse<SPAN class="punctuation token">:</SPAN> collapse<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>style<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>link rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fjs.arcgis.com%2F4.3%2Fesri%2Fcss%2Fmain.css" target="_blank">https://js.arcgis.com/4.3/esri/css/main.css</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>link rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fjs.arcgis.com%2F4.3%2Fesri%2Fthemes%2Flight%2Fmain.css" target="_blank">https://js.arcgis.com/4.3/esri/themes/light/main.css</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>script src<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fjs.arcgis.com%2F4.3%2F" target="_blank">https://js.arcgis.com/4.3/</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>script<SPAN class="operator token">></SPAN> <SPAN class="keyword token">var</SPAN> searchResults<SPAN class="punctuation token">;</SPAN> <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN> <SPAN class="string token">"esri/Map"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/views/MapView"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/geometry/Extent"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/renderers/SimpleRenderer"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/symbols/PictureMarkerSymbol"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/layers/FeatureLayer"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/widgets/Search"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/widgets/Legend"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/widgets/ScaleBar"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/widgets/Home"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dojo/domReady!"</SPAN> <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>Map<SPAN class="punctuation token">,</SPAN> MapView<SPAN class="punctuation token">,</SPAN> Extent<SPAN class="punctuation token">,</SPAN> SimpleRenderer<SPAN class="punctuation token">,</SPAN> PictureMarkerSymbol<SPAN class="punctuation token">,</SPAN> FeatureLayer<SPAN class="punctuation token">,</SPAN> Search<SPAN class="punctuation token">,</SPAN> Legend<SPAN class="punctuation token">,</SPAN> ScaleBar<SPAN class="punctuation token">,</SPAN> Home<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> basemap<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"gray"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> initialExtent <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Extent</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> xmin<SPAN class="punctuation token">:</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">118.13</SPAN><SPAN class="punctuation token">,</SPAN> xmax<SPAN class="punctuation token">:</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">118.1</SPAN><SPAN class="punctuation token">,</SPAN> ymin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">33.77</SPAN><SPAN class="punctuation token">,</SPAN> ymax<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">33.79</SPAN> <SPAN class="comment token">//spatialReference: 102100</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> view <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">MapView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> container<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"viewDiv"</SPAN><SPAN class="punctuation token">,</SPAN> map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN> zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">15</SPAN><SPAN class="punctuation token">,</SPAN> center<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">118.114090</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">33.783823</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> extent<SPAN class="punctuation token">:</SPAN> initialExtent <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> treeRenderer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleRenderer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">PictureMarkerSymbol</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fwww.clker.com%2Fcliparts%2Fe%2Fd%2F8%2Ff%2F1206581914343605633nicubunu_RPG_map_symbols_tree_8.svg.hi.png" target="_blank">http://www.clker.com/cliparts/e/d/8/f/1206581914343605633nicubunu_RPG_map_symbols_tree_8.svg.hi.png</A><SPAN>"</SPAN></SPAN><SPAN class="punctuation token">,</SPAN> width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">9</SPAN><SPAN class="punctuation token">,</SPAN> height<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">9</SPAN><SPAN class="punctuation token">,</SPAN> angle<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> campus <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fservices3.arcgis.com%2Fvq5vGR4r1YX7ueLg%2Farcgis%2Frest%2Fservices%2FCampusTreeLayers%2FFeatureServer%2F1%3Ftoken%3DR1VkseUaX5VeH-vBErTZrlB5cmP-sbvkiphjqt_QYJa6Vf2-5vtfczfMBZGc9qO2yu4lq1UclgeUo2fwnCytdDGlO658prv_BClf2E9tQaUuF8kfOJmsz66WSPyMn93DUz11f_gLn7O8EbtItskZPytYN6Q6LSzQ6Z2oYc6va9o8TjRcFgQRfMYT9VPjzKjBwIFMzhVpZw57KldjDdiNHAX4g2EvQ3-vJTBBZdVJ7H0" target="_blank">http://services3.arcgis.com/vq5vGR4r1YX7ueLg/arcgis/rest/services/CampusTreeLayers/FeatureServer/1?token=R1VkseUaX5VeH-vBErTZrlB5cmP-sbvkiphjqt_QYJa6Vf2-5vtfczfMBZGc9qO2yu4lq1UclgeUo2fwnCytdDGlO658prv_BClf2E9tQaUuF8kfOJmsz66WSPyMn93DUz11f_gLn7O8EbtItskZPytYN6Q6LSzQ6Z2oYc6va9o8TjRcFgQRfMYT9VPjzKjBwIFMzhVpZw57KldjDdiNHAX4g2EvQ3-vJTBBZdVJ7H0</A><SPAN>."</SPAN></SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>campus<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> tree <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> url<SPAN class="punctuation token">:</SPAN> <SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fservices3.arcgis.com%2Fvq5vGR4r1YX7ueLg%2Farcgis%2Frest%2Fservices%2FCampusTreeLayers%2FFeatureServer%2F0%3Ftoken%3DR1VkseUaX5VeH-vBErTZrlB5cmP-sbvkiphjqt_QYJa6Vf2-5vtfczfMBZGc9qO2yu4lq1UclgeUo2fwnCytdDGlO658prv_BClf2E9tQaUuF8kfOJmsz66WSPyMn93DUz11f_gLn7O8EbtItskZPytYN6Q6LSzQ6Z2oYc6va9o8TjRcFgQRfMYT9VPjzKjBwIFMzhVpZw57KldjDdiNHAX4g2EvQ3-vJTBBZdVJ7H0" target="_blank">http://services3.arcgis.com/vq5vGR4r1YX7ueLg/arcgis/rest/services/CampusTreeLayers/FeatureServer/0?token=R1VkseUaX5VeH-vBErTZrlB5cmP-sbvkiphjqt_QYJa6Vf2-5vtfczfMBZGc9qO2yu4lq1UclgeUo2fwnCytdDGlO658prv_BClf2E9tQaUuF8kfOJmsz66WSPyMn93DUz11f_gLn7O8EbtItskZPytYN6Q6LSzQ6Z2oYc6va9o8TjRcFgQRfMYT9VPjzKjBwIFMzhVpZw57KldjDdiNHAX4g2EvQ3-vJTBBZdVJ7H0</A><SPAN>."</SPAN></SPAN><SPAN class="punctuation token">,</SPAN> outFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"*"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> renderer<SPAN class="punctuation token">:</SPAN> treeRenderer <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>tree<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> search <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Search</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> view<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">,</SPAN> sources<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="punctuation token">{</SPAN> autoselect<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN> popupOpenOnSelect<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN> featureLayer<SPAN class="punctuation token">:</SPAN> tree<SPAN class="punctuation token">,</SPAN> searchFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"objectid"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"common_name"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> displayField<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"objectid"</SPAN><SPAN class="punctuation token">,</SPAN> exactMatch<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">false</SPAN><SPAN class="punctuation token">,</SPAN> outFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"objectid"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"common_name"</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> name<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Tree FS"</SPAN><SPAN class="punctuation token">,</SPAN> placeholder<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"Object ID or Tree Name"</SPAN><SPAN class="punctuation token">,</SPAN> maxResults<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">6</SPAN><SPAN class="punctuation token">,</SPAN> maxSuggestions<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">6</SPAN><SPAN class="punctuation token">,</SPAN> minSuggestCharacters<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">1</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">]</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>search<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"top-right"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> search<SPAN class="punctuation token">.</SPAN>viewModel<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"search-complete"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>event<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> searchResults <SPAN class="operator token">=</SPAN> event<SPAN class="punctuation token">.</SPAN>results<SPAN class="punctuation token">[</SPAN><SPAN class="number token">0</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>results<SPAN class="punctuation token">;</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'title'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>style<SPAN class="punctuation token">.</SPAN>visibility <SPAN class="operator token">=</SPAN> <SPAN class="string token">"visible"</SPAN><SPAN class="punctuation token">;</SPAN> pagenum <SPAN class="operator token">=</SPAN> searchResults<SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">/</SPAN> <SPAN class="number token">10</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="operator token">!</SPAN>Number<SPAN class="punctuation token">.</SPAN><SPAN class="token function">isInteger</SPAN><SPAN class="punctuation token">(</SPAN>pagenum<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> pagenum<SPAN class="operator token">++</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> pagehtml <SPAN class="operator token">=</SPAN> <SPAN class="string token">""</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">for</SPAN> <SPAN class="punctuation token">(</SPAN>x <SPAN class="operator token">=</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">;</SPAN> x <SPAN class="operator token"><=</SPAN> pagenum<SPAN class="punctuation token">;</SPAN> x<SPAN class="operator token">++</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> pagehtml <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">"<a id='page"</SPAN> <SPAN class="operator token">+</SPAN> x <SPAN class="operator token">+</SPAN><SPAN class="string token">"' href='#' style='margin-right:5px;' onClick='gotoresultspage(this.innerHTML)'>"</SPAN> <SPAN class="operator token">+</SPAN> x <SPAN class="operator token">+</SPAN> <SPAN class="string token">"</a>"</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> pagehtml <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">"<div id='resultstable'></div>"</SPAN><SPAN class="punctuation token">;</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'title'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>innerHTML <SPAN class="operator token">=</SPAN> pagehtml<SPAN class="punctuation token">;</SPAN> gotopage <SPAN class="operator token">=</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="token function">gotoresultspage</SPAN><SPAN class="punctuation token">(</SPAN>gotopage<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> legend <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Legend</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> view<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>legend<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"bottom-left"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> scaleBar <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">ScaleBar</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> view<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">,</SPAN> unit<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"non-metric"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>scaleBar<SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> position<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"bottom-left"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> homeBtn <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Home</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> view<SPAN class="punctuation token">:</SPAN> view <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>homeBtn<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"top-left"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="token function">gotoresultspage</SPAN><SPAN class="punctuation token">(</SPAN>gotopage<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> table <SPAN class="operator token">=</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getElementById</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"resultstable"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> tableCode <SPAN class="operator token">=</SPAN> <SPAN class="string token">"<table style='width:100%'>"</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> en <SPAN class="operator token">=</SPAN> gotopage <SPAN class="operator token">*</SPAN> <SPAN class="number token">10</SPAN><SPAN class="punctuation token">,</SPAN> bn <SPAN class="operator token">=</SPAN> en <SPAN class="operator token">-</SPAN> <SPAN class="number token">10</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">for</SPAN> <SPAN class="punctuation token">(</SPAN>x <SPAN class="operator token">=</SPAN> bn<SPAN class="punctuation token">;</SPAN> x <SPAN class="operator token"><</SPAN> en<SPAN class="punctuation token">;</SPAN> x<SPAN class="operator token">++</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">if</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="operator token">!</SPAN>searchResults<SPAN class="punctuation token">[</SPAN>x<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">{</SPAN> objid <SPAN class="operator token">=</SPAN> commonname <SPAN class="operator token">=</SPAN> <SPAN class="string token">" "</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="keyword token">else</SPAN><SPAN class="punctuation token">{</SPAN> commonname <SPAN class="operator token">=</SPAN> searchResults<SPAN class="punctuation token">[</SPAN>x<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>feature<SPAN class="punctuation token">.</SPAN>attributes<SPAN class="punctuation token">.</SPAN>common_name<SPAN class="punctuation token">;</SPAN> objid <SPAN class="operator token">=</SPAN> searchResults<SPAN class="punctuation token">[</SPAN>x<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>name<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> tableCode <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">"<tr><td>"</SPAN> <SPAN class="operator token">+</SPAN> objid <SPAN class="operator token">+</SPAN> <SPAN class="string token">"</td><td>"</SPAN> <SPAN class="operator token">+</SPAN> commonname <SPAN class="operator token">+</SPAN> <SPAN class="string token">"</td></tr>"</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> tableCode <SPAN class="operator token">+</SPAN><SPAN class="operator token">=</SPAN> <SPAN class="string token">"</table>"</SPAN><SPAN class="punctuation token">;</SPAN> table<SPAN class="punctuation token">.</SPAN>innerHTML <SPAN class="operator token">=</SPAN> tableCode<SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>head<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>body<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"title"</SPAN> style<SPAN class="operator token">=</SPAN><SPAN class="string token">"visibility:hidden; margin-left:auto; margin-right:auto; position:absolute; z-index:10; width:300px; height:230px; background-color:#ffffff; text-align:center; float:center;"</SPAN><SPAN class="operator token">></SPAN>title<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewDiv"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>body<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>html<SPAN class="operator token">></SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
I have a template which you can find in my code, and I mean when clicking on one of the search results in the search table, how it can show this template?
What is the "template"? What do you mean link them?
Hi Robert,
I am trying to link the template to the search table, can you please tell me what is the best way to do that? I couldn't find any properties. this is my first project that using javascript and API.
Yes Robert, Thank you very much.
Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
