Update autocomplete search version from Arcgis javascript API 3.1 to 4.10

929
3
Jump to solution
04-08-2019 12:18 AM
Vakhtang_Zubiashvili
Occasional Contributor II

Hi people,

I use ArcGIS JavaScript API 4.1 ( it was in ArcGIS JavaScript API 3.1 )and could not update this code in this version. Any ideas how to do it? Data responses, but autocomplete does not work:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Sample Code</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>

<link rel="stylesheet" href="https://js.arcgis.com/3.10/js/esri/css/esri.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://js.arcgis.com/4.10/"></script>
</style>
<script>

require(["esri/Map","esri/views/MapView", "esri/tasks/QueryTask","esri/tasks/support/Query","dojo/domReady!"],
function (Map, MapView, QueryTask, Query) {

var map;

var map = new Map({
basemap: "topo-vector"
})
var view = new MapView({
container: "viewDiv",
map: map,
extent: { // Extent Chemi rukistvis()
xmin: 5278000,
ymin: 5147000,
xmax: 4377000,
ymax: 5247784,
spatialReference: 102100
}
});

$(function () {
var array = []
queryTask = new QueryTask("localhost:6080/arcgis/rest/services/Melioracia_Geo_201801251705/MapServer/3");
query = new Query();
query.returnGeometry = false;
query.outFields = ["სარწყავი_სისტემა"];
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) {
// Convert the attribute to a string. Null Values create an extra comma which stops the widget from functioning.
tags = String(featureAttributes[attr]);
// push the attributes tothe blank array
resultItems.push(tags);
}
}
// 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)
$("#tags").autocomplete({
// set the source as the availble tags above
source: availableTags
});
}
});

});
</script>
</head>

<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
<div id="map"></div>
<div id="viewDiv"></div>
</body>
</html>
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Vakhtag,

   There is a little more to converting an app from 3.x to 4.x.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Sample Code</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/themes/light/main.css" />
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script src="https://js.arcgis.com/4.11/"></script>

  </style>

  <script>
    require(["esri/Map", "esri/views/MapView", "esri/tasks/QueryTask", "esri/tasks/support/Query", "dojo/domReady!"],

      function(Map, MapView, QueryTask, Query) {

        var map = new Map({
          basemap: "topo-vector"
        })

        var view = new MapView({
          container: "viewDiv",
          map: map,
          extent: { // Extent Chemi rukistvis()
            xmin: 5278000,
            ymin: 5147000,
            xmax: 4377000,
            ymax: 5247784,
            spatialReference: 102100
          }
        });

        $(function() {
          var array = []
          queryTask = new QueryTask({url: "localhost:6080/arcgis/rest/services/Melioracia_Geo_201801251705/MapServer/3"});
          query = new Query();
          query.returnGeometry = false;
          query.outFields = ["სარწყავი_სისტემა"];
          query.where = "1=1";
          queryTask.execute(query).then(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) {
                // Convert the attribute to a string. Null Values create an extra comma which stops the widget from functioning.
                tags = String(featureAttributes[attr]);
                // push the attributes tothe blank array
                resultItems.push(tags);
              }
            }

            // 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)
            $("#tags").autocomplete({
              // set the source as the availble tags above
              source: availableTags
            });
          }
        });
      });
  </script>
</head>

<body>
  <div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags">
  </div>
  <div id="map"></div>
  <div id="viewDiv"></div>
</body>

</html>

View solution in original post

3 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Vakhtag,

   There is a little more to converting an app from 3.x to 4.x.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Sample Code</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/themes/light/main.css" />
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script src="https://js.arcgis.com/4.11/"></script>

  </style>

  <script>
    require(["esri/Map", "esri/views/MapView", "esri/tasks/QueryTask", "esri/tasks/support/Query", "dojo/domReady!"],

      function(Map, MapView, QueryTask, Query) {

        var map = new Map({
          basemap: "topo-vector"
        })

        var view = new MapView({
          container: "viewDiv",
          map: map,
          extent: { // Extent Chemi rukistvis()
            xmin: 5278000,
            ymin: 5147000,
            xmax: 4377000,
            ymax: 5247784,
            spatialReference: 102100
          }
        });

        $(function() {
          var array = []
          queryTask = new QueryTask({url: "localhost:6080/arcgis/rest/services/Melioracia_Geo_201801251705/MapServer/3"});
          query = new Query();
          query.returnGeometry = false;
          query.outFields = ["სარწყავი_სისტემა"];
          query.where = "1=1";
          queryTask.execute(query).then(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) {
                // Convert the attribute to a string. Null Values create an extra comma which stops the widget from functioning.
                tags = String(featureAttributes[attr]);
                // push the attributes tothe blank array
                resultItems.push(tags);
              }
            }

            // 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)
            $("#tags").autocomplete({
              // set the source as the availble tags above
              source: availableTags
            });
          }
        });
      });
  </script>
</head>

<body>
  <div class="ui-widget">
    <label for="tags">Tags: </label>
    <input id="tags">
  </div>
  <div id="map"></div>
  <div id="viewDiv"></div>
</body>

</html>
Vakhtang_Zubiashvili
Occasional Contributor II

Thank you so much Robert As i guess it was a Query problem -

query.where = "OBJECTID > 0", is there anything that i have to know for future use?
0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Vakhtag,

   When you are trying to query all records the safest way is to use where 1=1 because this is always evaluated as true.

The other lines I fixed were lines 50 and 55

Line 50 the 4.x API always want an object passed to classes now.

Line 55 the standard in 4.x is to use .then to a successful async call and .catch for a failure.

Don't forget to mark this question as answered by click on mark correct link on the reply that answered your question.