Select to view content in your preferred language

JQuery Auto-complete widget textbox

5049
15
Jump to solution
09-22-2014 09:39 AM
AlexGole
Deactivated User

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!

0 Kudos
15 Replies
AlexGole
Deactivated User

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);

                         }

                     }

0 Kudos
MatthewLewis
Deactivated User

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.

0 Kudos
AlexGole
Deactivated User

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

0 Kudos
AlexGole
Deactivated User

Would that work with a dataset of 5000 records (US township and range)? My approach fails to query (too large of a dataset!)

0 Kudos
MatthewLewis
Deactivated User

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

            });