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-serv...
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>