mlewis22

Auto-Complete Search Box Using ArcGIS RESTfull Services

Blog Post created by mlewis22 on Oct 21, 2014

DropDown_AutoComplete.png

 

Introduction

 

I recently had a request to include a auto-complete search box for a simple web application. Whilst searching around for various solutions I noticed there wasn't much documentation on how this could be achieved using data published on ArcGIS For Server.

 

There are a number of different ways that you could retrieve an array of information which in turn can be used to populate a search box. In this blog I want to show you one method of creating an auto-complete search box. To do this I will be using the simple auto complete JQuery widget & ArcGIS JavaScript API. Authors note - My writing skills are particularly poor... so I apologise for any difficulty in reading this blog .

 

I'm targeting this at beginners so I'm going to break this down into different parts to explain what's going on.

 

The JQuery Auto-Complete Widget

 

Below is a snippet of an JQuery autocomplete widget. You will see that an array "availableTags" has been hard coded with different string values.

 

  $(function() {
    var availableTags = [
      "Java",
      "JavaScript",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  });

 

 

You can add this to simple map application like so - JSFiddle

 

This creates a very simple auto complete..... Now this is great for a few static options. What if you want to query 1000's of records?

 

Query ArcGIS for Server

 

In order to utilise this JQuery widget  effectively we need to provide an array in order to populate the widget. To do this you simply need to query the rest service on your ArcGIS server.

 

1) Set up a query task

 

queryTask = new QueryTask("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/MapServer/1");
query = new Query();
query.returnGeometry = false;
query.outFields = ["gnis_name"];
query.where = "OBJECTID > 0";
queryTask.execute(query, showResults);


 

2) Show your results - this particular set of loops converts the attributes to a string and stores them in a variable called "resultItems". I found this stopped null values causing errors in the JQuery widget

function showResults(results) {
// Collect the results
     var resultItems = [];
     var resultCount = results.features.length;
          for (var i = 0; i < resultCount; i++) {
              var featureAttributes = results.features[i].attributes;
              for (var attr in featureAttributes) {
                    // Convert the attribute to a string. Null Values create an extra comma which stops the widget from functioning.
                    tags = String(featureAttributes[attr]);
                    // push the attributes tothe blank array
                    resultItems.push(tags);
                    }
              }

 

3) Sort and remove any duplicates

// Sort the array
sorted = resultItems.sort()


// Remove Duplicates
var uniqueNames = [];
$.each(sorted, function (i, el) {
    if ($.inArray(el, uniqueNames) === -1) uniqueNames.push(el);
});


// Set the varrible array
array = uniqueNames

 

4) Then add your array to the source option.

 

// This is your AutoComplete Widget
var availableTags = array;
                
// Reference the div id which you want the autocomplete list to appear (in this case tag)
$("#tags").autocomplete({
    // set the source as the availble tags above
    source: availableTags
});

 

As simple as that...  I've added a working example here - JSFiddle. I've also attached a full working html to the blog

 

Conclusion

You now have a simple autocomple textbox for you own personal application. Adding popups & modifying the UI will make your application more user friendly. I hope the core code will be of use.

Attachments

Outcomes