Auto complete a textbox from a map service in a widget

TerryGustafson — Sun, 12 Dec 2021 10:03:22 GMT

I'm trying to auto populate a text box in a widget I have created. I would like to be able to start typing a route and it returns the lists of routes as you type. I don't need to know how to pass this object as I already have that working. I found this post and tried to implement it in my application with not much success.. https://community.esri.com/people/mlewis22/blog/2014/10/21/autocomplete-search-box-using-arcgis-services

I was wondering if anyone else as has done this in a widget.js file? Here is what my code currently looks like. Any direction would be greatly appreciated.

_queryRoutes: function (Query, QueryTask) {

    //create array
    var array = []
    //build query task
    var queryTask = new QueryTask("https://app.mdt.mt.gov/arcgis/rest/services/LRS/LRM_RM/MapServer/0");
    //build query filter
    var query = new Query();
    query.returnGeometry = false;
    query.outFields = ["corridor"];
    query.where = "OBJECTID > 0";
    queryTask.execute(query, showResults);

    function showResults(results) {
        // Collect the results
        var resultItems = [];
        var resultCount = results.features.length;
        for (var i = 0; i < resultCount; i++) {
            var featureAttributes = results.features[i].attributes;
            for (var attr in featureAttributes) {
                 var routes = String(featureAttributes[attr]);
                resultItems.push(routes);
            }
        }

        // Sort the array
        var sorted = resultItems.sort()

        // Remove Duplicates
        var uniqueNames = [];

        $.each(sorted, function (i,el) {
            if ($.inArray(el, uniqueNames) === -1) {
                uniqueNames.push(el);
            }
        });

        array = uniqueNames

        var availableTags = array;

        $("#routes").autocomplete({
            // set the source as the availableTags above
            source: availableTags
        });

    }
},

I was able to create this html file but not sure how to incorporate it into my custom widget.

<!DOCTYPE html>
<html>
<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" />
    <link rel="stylesheet" href="https://js.arcgis.com/3.20/js/esri/css/esri.css">
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="https://community.esri.com/resources/demos/style.css">

<style>
html, body,

        body {
            background-color: #FFF;
            overflow: hidden;
            font-family: "Trebuchet MS";
        }
    </style>
    <script src="https://js.arcgis.com/3.20/"></script>
    <script>

require(["esri/map", "esri/tasks/QueryTask","esri/tasks/query", "dojo/domReady!"], function (Map, QueryTask, Query) {

        $(function () {
            var array = []
            queryTask = new QueryTask("https://app.mdt.mt.gov/arcgis/rest/services/LRS/LRM_RM/MapServer/0");
            query = new Query();
            query.returnGeometry = false;
            query.outFields = ["Corridor"];
            query.where = "OBJECTID > 0";
            queryTask.execute(query, showResults);

            function showResults(results) {
                // Collect the results
                var resultItems = [];
                var resultCount = results.features.length;
                for (var i = 0; i < resultCount; i++) {
                    var featureAttributes = results.features.attributes;
                    for (var attr in featureAttributes) {
                        // Convert the attribute to a string. Null Values create an extra comma which stops the widget from functioning.
                        routes = String(featureAttributes[attr]);
                        // push the attributes tothe blank array
                        resultItems.push(routes);
                        }
                    }

// Sort the array
sorted = resultItems.sort()

                // Remove Duplicates
                var uniqueNames = [];
                $.each(sorted, function (i, el) {
                    if ($.inArray(el, uniqueNames) === -1) uniqueNames.push(el);
                });

// Set the varrible array
array = uniqueNames

// This is your AutoComplete Widget
var availableTags = array;

                // Reference the div id which you want the autocomplete list to appear (in this case tag)
                $("#routes").autocomplete({
                    // set the source as the availble tags above
                    source: availableTags
                });
            }
        });
      });
    </script>
</head>
<body>
    <div class="ui-widget">
        <label for="routes">Corridor: </label>
        <input id="routes">
    </div>
</body>
</html>

I figured it out. Needed to have the following libraries loaded in the index.html file.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script>

topic Auto complete a textbox from a map service in a widget in Web AppBuilder Custom Widgets Questions

Auto complete a textbox from a map service in a widget