JQuery Auto-complete widget textbox

AlexGole · ‎09-22-2014

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!

AlexGole · ‎10-17-2014

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

MatthewLewis · ‎10-21-2014

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.

AlexGole · ‎10-21-2014

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

MatthewLewis · ‎10-21-2014

Auto-Complete Search Box Using ArcGIS RESTfull Services

AlexGole · ‎10-21-2014

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

MatthewLewis · ‎10-22-2014

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

});