Add tooltip to sourcesMenu item (Search widget)

LauraMiles1 · ‎07-14-2016

The search widget has a dropdown for the user to pick a source to search from. Once the source has been picked, the searchInput textbox is activated - in Internet Explorer, this removes any placeholder text. I'm finding users aren't sure which fields in a particular source are searchable, so in the placeholder text I've added descriptions (ie. "Type tenant name, lot ID"). This works great for Chrome but most of our users use IE. If I could add a title when the user hovers on each source in the dropdown menu, that would be great - but I'm having trouble. The search widget puts all my sources into an unordered list, the html output looks like this:

<li data-index="0" role="menuitem" class="active" tabindex="0">Address</li>

<li data-index="1" role="menuitem" class="" tabindex="0">Agreement</li>

<li data-index="2" role="menuitem" class="" tabindex="0">Assets</li>

<li data-index="4" role="menuitem" class="" tabindex="0">Marine Reaches</li>

<li data-index="5" role="menuitem" class="" tabindex="0">Marine Terminals</li>

<li data-index="6" role="menuitem" class="" tabindex="0">Risk Rating</li>

</ul>

</div>

I would think I could use some jquery, such as this, to access each <li> element and add a title:

$( "ul li:nth-child(0)" ).attr('title', 'Type an address or intersection');
$( "ul li:nth-child(1)" ).attr('title', 'Type a tenant name or lot ID');

etc.

This works for a simple html page (jsfiddle) but it's not working in my map. Something must be interacting with it but I'm not sure what...any ideas?

RobertScheitlin__GISP · ‎07-21-2016

Laura,

Here is a sample that demos your request:

<!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.17/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.17/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;
        }
    </style>

    </script>
    <script src="https://js.arcgis.com/3.17/"></script>
    <script>
        require([
            "esri/map", "esri/dijit/Search", "esri/layers/FeatureLayer", "esri/InfoTemplate", "dojo/query", "dojo/dom-attr", "dojo/domReady!"
        ], function(Map, Search, FeatureLayer, InfoTemplate, query, domAttr) {
            var map = new Map("map", {
                basemap: "gray",
                center: [-97, 38], // lon, lat
                zoom: 5
            });

            var search = new Search({
                enableButtonMode: false, //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..."),
                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();

            query(".searchMenu.sourcesMenu>ul>li").forEach(function(node, index) {
                switch (index) {
                    case 0:
                        domAttr.set(node, "title", "All Source tooltip");
                        break;
                    case 1:
                        domAttr.set(node, "title", "ESRI World Geocoder tooltip");
                        break;
                    case 2:
                        domAttr.set(node, "title", "Congressional Districts tooltip");
                        break;
                    case 3:
                        domAttr.set(node, "title", "Senator tooltip");
                        break;
                }
            })

        });
    </script>
</head>

<body>
    <div id="search"></div>
    <div id="map"></div>
</body>

</html>

View solution in original post

RobertScheitlin__GISP · ‎07-21-2016

Laura,

Here is a sample that demos your request:

<!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.17/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.17/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;
        }
    </style>

    </script>
    <script src="https://js.arcgis.com/3.17/"></script>
    <script>
        require([
            "esri/map", "esri/dijit/Search", "esri/layers/FeatureLayer", "esri/InfoTemplate", "dojo/query", "dojo/dom-attr", "dojo/domReady!"
        ], function(Map, Search, FeatureLayer, InfoTemplate, query, domAttr) {
            var map = new Map("map", {
                basemap: "gray",
                center: [-97, 38], // lon, lat
                zoom: 5
            });

            var search = new Search({
                enableButtonMode: false, //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..."),
                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();

            query(".searchMenu.sourcesMenu>ul>li").forEach(function(node, index) {
                switch (index) {
                    case 0:
                        domAttr.set(node, "title", "All Source tooltip");
                        break;
                    case 1:
                        domAttr.set(node, "title", "ESRI World Geocoder tooltip");
                        break;
                    case 2:
                        domAttr.set(node, "title", "Congressional Districts tooltip");
                        break;
                    case 3:
                        domAttr.set(node, "title", "Senator tooltip");
                        break;
                }
            })

        });
    </script>
</head>

<body>
    <div id="search"></div>
    <div id="map"></div>
</body>

</html>

LauraMiles1 · ‎07-21-2016

Works perfectly, thanks Robert!