JQuery Auto-complete widget textbox

[AlexGole]

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!

[JonathanUihlein]

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!

[AlexGole]

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 = [];

                         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) {
                                 availableTags.push(value.attributes.STATE_NAME);
                             });
                         }, function (error) {
                             alert("Error: " + error);
                         });

                         $("#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.

[JonathanUihlein]

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

[HaroldBostic]

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

    } );

[AlexGole]

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

[HaroldBostic · Accepted solution]

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?

[AlexGole]

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

[MatthewLewis]

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

Auto-Complete Search Box Using ArcGIS RESTfull Services

[AlexGole]

Looks awesome! Thanks for sharing!