Update autocomplete search version from Arcgis javascript API 3.1 to 4.10

786
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>

View solution in original post

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.