Hi all,
I am trying to use the JQuery auto-complete widget with my widget. My goal is to create an input text box where users can enter a county (that would auto-complete) then, when the auto-completed county value is entered have a function that would allow users to extract data by the selected county extent.
here is what I have so far.
I would select features values for the auto-complete input box as such:
I get a 404 error when trying to achieve this first task.
error:
POST http://localhost:58479/layout-master/demos/[object%20Object] 404 (Not Found) jquery.min.js:4send jquery.min.js:4m.extend.ajax jquery.min.js:4m.(anonymous function) jquery.min.js:4$.autocomplete.source Map-Widget-Panel-carousel-BasemapList-Legend-%20Tool.html:484e.widget._search jquery-ui.min.js:7(anonymous function) jquery-ui.min.js:6e.widget.search jquery-ui.min.js:7(anonymous function) jquery-ui.min.js:6(anonymous function)
//build query task
var queryTask = new QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3");
//create an array
var aStateNames = [];
//build query filter
var query = new Query();
query.returnGeometry = false;
query.outFields = ["STATE_NAME"];
query.where = "OBJECTID > 0";
queryTask.execute(query, function (results) {
//parse results and add to autocomplete widget
dojo.forEach(results.features, function (value, index) {
aStateNames.push(value.attributes.STATE_NAME);
});
}, function (error) {
alert("Error: " + error);
});
$("#states").autocomplete({
source: aStateNames
});
and then extract by the selected value:
var queryTask = new QueryTask("http://webgisdevint1/arcgis/rest/services/Alex_Try/Counties/MapServer/0");
queryTask.on("complete", addToMap)
var query = new Query();
query.returnGeometry = true;
query.outFields = ["STATE_NAME"];
query.where = "STATE_NAME = '" + aStateNames+ "'";
query.outSpatialReference = map.spatialReference;
queryTask.execute(query, function (featureSet) {
var AOI = featureSet.features[0].geometry;
var graphic = new Graphic(AOI, symbol);
var features = [];
features.push(graphic);
var fSet = new FeatureSet();
fSet.features = features;
How can I have the auto-complete widget work and then hook it up to the extract function?
Any idea, help is welcome!
Solved! Go to Solution.
Hi Matthew! Can you share again this Auto-Complete Search Box Using ArcGIS RESTfull Services
I cant access it. I am back on this auto-complete project and for some reasons I am not getting any positive results.
I get a wkid error when it launches the Query, maybe the selectedCounty variable is empty?
Thanks,
Alex
//Button launch Query
on(dom.byId("QueryNew"), "click", executeQueryTask);
//AutComplete Select Counties
$(function () {
var queryTask = new QueryTask("http://webgisdevint1/arcgis/rest/services/Alex_Try/Counties/MapServer/0");
var availableTags = [];
var query = new Query();
query.returnGeometry = false;
query.outFields = ["NAME_PCASE"];
query.where = "OBJECTID > 0";
queryTask.execute(query, function (results) {
//parse results and add to autocomplete widget
dojo.forEach(results.features, function (value, index) {
availableTags.push(value.attributes.NAME_PCASE);
});
}, function (error) {
alert("Error: " + error);
});
$("#tags").autocomplete({
source: availableTags,
select: function (event, ui) {
console.log("selected value!")
selectedCounty = $("#tags").val(ui.item.value);
}
});
});
var highlightSymbol3 = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255, 0, 0]), 3), new Color([125, 125, 125, 0.35]));
//Query by State
var queryTask = new QueryTask("http://webgisdevint1/arcgis/rest/services/Alex_Try/Counties/MapServer/0");
var query = new Query();
query.returnGeometry = true;
query.outFields = ["NAME_PCASE"];
query.outSpatialReference = map.spatialReference;
function executeQueryTask(selectedCounty) {
console.log("Querying...")
query.where = "NAME_PCASE = '" + selectedCounty + "'";
queryTask.execute(query, showResults);
}
function showResults(featureSet) {
//remove all graphics on the maps graphics layer
map.graphics.clear();
//Performance enhancer - assign featureSet array to a single variable.
var resultFeatures = featureSet.features;
//Loop through each feature returned
for (var i = 0, il = resultFeatures.length; i < il; i++) {
//Get the current feature from the featureSet.
//Feature is a graphic
var graphic = resultFeatures;
graphic.setSymbol(highlightSymbol3);
//
//Add graphic to the map graphics layer.
map.graphics.add(graphic);
var extent = esri.graphicsExtent(map.graphics.graphics);
map.setExtent(extent, true);
}
}
Hi Alex,
It seems the groups have moved and the posted blog may have been lost. I'm enquiring about its recovery.
As to the WKID issue i would make sure your map WKID and service WKID match. You suggested about the selectCountry variable being empty. Perform a check on it before it executes the task.
I actually found a solution to my issue. I need to refine my code a bit. I don't need 2 graphics variables ect... but it works! I am looking into your blog right now! It is great!
$("#tags").autocomplete({
source: availableTags,
select: function (event, ui) {
console.log(ui.item.value);
var queryTask = new QueryTask("http://webgisdevint1/arcgis/rest/services/Alex_Try/Counties/MapServer/0");
queryTask.on("complete", addToMap);
var query = new Query();
query.returnGeometry = true;
query.outFields = ["NAME_PCASE"];
query.where = "NAME_PCASE = '" + ui.item.value + "'";
query.outSpatialReference = map.spatialReference;
queryTask.execute(query, function (featureSet) {
var AOI = featureSet.features[0].geometry;
var graphic = new Graphic(AOI, symbol8);
var features = [];
features.push(graphic);
var fSet = new FeatureSet();
fSet.features = features;
console.log("Querying...")
});
}
});
});
var symbol8 = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255, 0, 0]), 3), new Color([125, 125, 125, 0.35]));
function addToMap(results) {
map.graphics.clear();
var featureArray = results.featureSet.features;
var feature = featureArray[0];
var graph = map.graphics.add(feature.setSymbol(symbol8));
var extent = esri.graphicsExtent(map.graphics.graphics);
map.setExtent(extent, true);
}
Alex
Would that work with a dataset of 5000 records (US township and range)? My approach fails to query (too large of a dataset!)
Your limitations are going to be
1) The limit of returned features.You can change this in the service settings
2) Your infrastructure. I.e how fast everything communicates
3) Sometimes the CORS method causes issues and you may need to use a proxy.
Check your feature limitation first. You should have no trouble querying 5000 features.
One other point - You may want to introduce a character limit before the autocomplete starts to query. Your users are unlikely to need the first two characters. for example -
$("#tags").autocomplete({
// set the source as the availble tags above
source: availableTags,
minLength: 3
});