topic Re: JQuery Auto-complete widget textbox in ArcGIS JavaScript Maps SDK Questions

JQuery Auto-complete widget textbox

AlexGole — Mon, 22 Sep 2014 16:39:17 GMT

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!

Re: JQuery Auto-complete widget textbox

JonathanUihlein — Tue, 23 Sep 2014 17:40:07 GMT

Hi Alex,

It's hard to tell what is causing your issue without seeing the code in action.

Have you seen this sample about query tasks?:

Query data without a map | ArcGIS API for JavaScript

If that doesn't help, could you generate a working (public) jsfiddle that showcases the first problem only (remove ALL other irrelevant code, please).

Thanks!

Re: JQuery Auto-complete widget textbox

AlexGole — Tue, 23 Sep 2014 18:48:30 GMT

Hi Jonathan, Thank you for your reply. To give you a better idea of what I am trying to achieve here.

I started working on a web map that would allow the users to clip and ship using the ESRI template here.

I wanted to add to the "Extract Data" tool a selection (for clipping) by "County" geometry and by "Unit" geometry. As you can see my clip and ship, I used a dojo drop down menu which worked great, but It would be much nicer to have a selection process based on JQuery autocomplete.

1) I got my first problem taken care of.

You can see my code here. Click on about Tab and you will get my autocomplete box.

Solution Code:

$(function () {
var queryTask = new QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3");

var availableTags = [];

                         $("#tags").autocomplete({
                             source: availableTags
                         });
                     });

2) Now here what I cannot figure out.

How do I pass the selected autocomplete result to my extractbycounty and extractbyunit functions? I see that the autocomplete has a "select method... not too sure how to use it.

Re: JQuery Auto-complete widget textbox

JonathanUihlein — Tue, 23 Sep 2014 18:58:06 GMT

It's been a while since I've used jQuery but according to the documentation, you would want to hook up your callback functions to the select event emitted by the autocomplete widget. It looks like the event is named 'autocompleteselect' so that should be all you need.

Autocomplete Widget | jQuery UI API Documentation

Re: JQuery Auto-complete widget textbox

HaroldBostic — Tue, 23 Sep 2014 20:42:08 GMT

two ways to do it

$("#tags").autocomplete({

source: availableTags,

select:function(evt,data){

console.log(data.label) //the text from the autocomplete

console.log(data.value) //the value of the selected item, the value and label will be the same if not explicitly set

extractbycounty(ui.value);

}

});

or you can

$("#tags").autocomplete({

source: availableTags

});

$( "#tags" ).on( "autocompleteselect", function( evt, data ) {

console.log(data.label) //the text from the autocomplete

console.log(data.value) //the value of the selected item, the value and label will be the same if not explicitly set

extractbycounty(ui.value); //this will send the selected value to your extract by county function

} );

Re: JQuery Auto-complete widget textbox

AlexGole — Wed, 24 Sep 2014 16:38:12 GMT

Harold and Jonathan, thank you, I think that is the way to go. A few things I need to clear before:

1) Can I pass the selected item value as a variable (ui.item)?

In my old script I used a variable "county" as a way to pass the selected value to my query.

query.where = "NAME_PCASE = '" + county + "'";

I am looking to do something similar to the following with autocomplete select:

This would , I believe, behave the same way as the autocomplete select

on(registry.byId("sel_unit"), "change", function () {
     map.graphics.clear();
            extractMethod = "extractByUnit";
         });

Then .... I pass the "changed value" to a variable that will be used by my extractbycounty function:

case "extractByCounty":
               var county = document.getElementById("sel_county").value;
               extractByCounty(county);
               break;

Finally, I launch my function this way (just a button click:

registry.byId("extract").on("click", myFunction);

Harold, I am not too sure how to use this in my script:

extractbycounty(ui.value);

Thank you for your help!

Alex

Re: JQuery Auto-complete widget textbox

HaroldBostic — Wed, 24 Sep 2014 21:33:16 GMT

Hello, what I would do is the following

under

var selected_value;

I would add the below var, unless the above var is there to serve this purpose

var selectedCounty = null;

Then later create your autocomplete widget

$("#tags").autocomplete({
        source: availableTags
                         
  });

and listen for the autocompleteselect event as shown in the previous example. Notice you now assign the selected county value to the the selectedCounty var you declared globally.......or this could be the selected_value

$( "#tags" ).on( "autocompleteselect", function( evt, data ) {

        console.log(data.label) //the text from the autocomplete
        console.log(data.value) //the value of the selected item, the value and label will be the same if not explicitly set
                             
        selectedCounty = ui.value;  //this will send the selected value to your extract by county function
                             
                         

    } );

in your switch have the following

case "extractByCounty":  

     //var county = document.getElementById("sel_county").value;  
     //instead of doing the above, just pass in selectedCounty
     //since selectedCounty is global, it may be uneccessary to to pass in because is can be used anywhere
     extractByCounty(selectedCounty);
     break;

When I had extractbycounty(ui.value); I was just showing you how to pass the selected value to your extractByCounty function, but as you highlighted in your previous post, you call extractByCounty from a switch statement, so I adjusted the code accordingly

Make better sense?

Re: JQuery Auto-complete widget textbox

AlexGole — Wed, 24 Sep 2014 23:07:33 GMT

Alright it does make more sense to me now. I am going to give it a shot and get here if I experience any issues. Thanks for your help!

Alex

Re: JQuery Auto-complete widget textbox

MatthewLewis — Thu, 25 Sep 2014 20:56:58 GMT

just let you know I blogged this awhile back with working examples

Auto-Complete Search Box Using ArcGIS RESTfull Services

Re: JQuery Auto-complete widget textbox

AlexGole — Thu, 25 Sep 2014 21:01:49 GMT

Looks awesome! Thanks for sharing!

Re: JQuery Auto-complete widget textbox

AlexGole — Fri, 17 Oct 2014 22:39:59 GMT

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

Re: JQuery Auto-complete widget textbox

MatthewLewis — Tue, 21 Oct 2014 12:48:43 GMT

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.

Re: JQuery Auto-complete widget textbox

MatthewLewis — Tue, 21 Oct 2014 12:55:08 GMT

Auto-Complete Search Box Using ArcGIS RESTfull Services

Re: JQuery Auto-complete widget textbox

AlexGole — Tue, 21 Oct 2014 16:15:33 GMT

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

Re: JQuery Auto-complete widget textbox

AlexGole — Tue, 21 Oct 2014 23:27:24 GMT

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

Re: JQuery Auto-complete widget textbox

MatthewLewis — Wed, 22 Oct 2014 08:37:36 GMT

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

});