Update autocomplete search version from Arcgis javascript API 3.1 to 4.10

Vakhtang_Zubiashvili · ‎04-08-2019

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>

RobertScheitlin__GISP · ‎04-08-2019

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

RobertScheitlin__GISP · ‎04-08-2019

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 · ‎04-08-2019

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?

RobertScheitlin__GISP · ‎04-08-2019

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.