Skip Navigation Links
Auto Complete Utilities

Address AutoComplete


This page demostrates how to use either the jQuery UI AutoComplete widget or the Ajax Control Toolkit AutoComplete Extension to consume the AIMS ASP.NET Web Service (http://ims.jocogov.org/webservices/propertywebservice/propertywebservice.asmx?op=ValidateStringAjax) that is JSON Serialized. They will both generate the same results with different implementations. There are many other auto complete widgets out there to chose from should either of these not meet your needs.

The AIMS property webservice will allow you to search by address, name, or propertyID. You can get a feel for how the autocomplete works with the webservice by typing in the input box below or by visiting either of the following sites: Location Maps & Information or JOCO Online Mapping.

Working Example:    


jQuery AutoComplete

The JQuery Autocomplete widget is one of the widgets provided in jQuery UI and provides suggestions while you type into the field. jQuery UI is a free widget and interaction library built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications. NOTE: Using the jQuery Autocomplete is the preferred method over the AJAX Control Toolkit.

jQuery AutoComplete Widget Example:    

Since this example is for the jQuery Autocomplete UI you will need to include the jQuery javascript and css files in your page head. They are downloadable by visiting the jQuery UI site or simply by referencing them as seen below.

image

In the working example we have limited the size of the list box and allowed it to be scrollable. This is done by including the following styling to your page.

image

The working example was created using an input but you could also use a textbox. Make sure you assign it an id so it can be referenced by the autocomplete widget. See the example below.

image

Referencing the code below notice how the input is wired to the AutoComplete widget. Also notice the select portion of the script. This allows the input value to be replaced with the selection.

To consume this web service using jQuery $.ajax(), two important points to note is that the request should be a POST request and the request’s content-type must be ‘application/json; charset=utf-8’. It is also important to observe the return values. These return values must exist for the service to work properly.

image

From the code above, notice the url "../WebServiceProxy.asmx/ValidateStringAjax". You will need to add a WebService to call the AIMS web service in order to avoid cross domain issues. The webservice created for this example was named WebServiceProxy and it contains a function called ValidateStringAjax. The names are not important as long as you are consistent and reference them as in the example. Below you will see an example of the webservice needed in the project.

From the example codes above you will see the following line of code: Dim ws As New org.jocogov.ims.PropertyWebService. You will need to add a Web Reference by using the url: http://ims.jocogov.org/webservices/PropertyWebService/propertywebservice.asmx.

AjaxControlToolKit AutoCompleteExtension

AutoComplete is an ASP.NET AJAX extender that can be attached to any TextBox control, and will associate that control with a popup panel to display words that begin with the prefix typed into the textbox.

Ajax Control Toolkit AutoComplete Example:    

The Ajax Control Toolkit will need to be installed in your project in order to use the AutoCompleteExtender. Information on how to download the Toolkit can be found here.

Once the toolkit has been added to the project the AjaxControlToolkit will need to be either registered at the top of the page or in the web.config for the whole project. Below are some examples of how to register it on the page and in the web.config.

It is important to note that once it is registerd in the web.config it will not need to be registered on each idividual page. However, if it is not registered in the web.config it will need to be registered in each page that will be using it.

Page Registration

Image

web.config Registration

Image

Once the registration has been added the ToolkitScriptManager, Control, and TextBox will need to be added. See the code below:

image

Here is a list of the properties used in this AutoCompleteExtender example along with descriptions. A list of all the properties as well as more information about the Ajax AutoCompleteExtender can be found on the ASP.Net Site.

  • TargetControlID - The TextBox control where the user types content to be automatically completed - TargetControlID="addressBox"
    • image
  • ServiceMethod - The web service method to be called. - ServiceMethod="ValidateStringAjax2"
  • ServicePath -The path to the webservice. - ServicePath="../WebServiceProxy.asmx"

In order to avoid cross domain issues a WebService to call the AIMS web service was created named WebServiceProxy.asmx with a function called ValidateStringAjax2. The names are not important as long as they are consistent and referenced correctly. Below is an example of the webservice needed in the project.

From the example codes above you will see the following line of code: Dim ws As New org.jocogov.ims.PropertyWebService. You will need to add a Web Reference by using the url: http://ims.jocogov.org/webservices/PropertyWebService/propertywebservice.asmx.

In the working example we have limited the size of the list box and allowed it to be scrollable. This is done by including the following styling to the page.

image

And by adding the following properties to the control.

image

Please contact us directly at 913-715-1600 if you need more assistance.

Source Code:
jQuery AutoComplete Example
AJAX AutoComplete Example

References:
TextBox AutoComplete with ASP.NET and jQuery UI written by Suprotim Agarwal
jQuery AutoComplete
ASP.Net Site
Simple CSS Style For AJAX AutoComplete Extender
Ajax Control Toolkit


Back to Address Services