Back to Top
The nuts and bolts for
Creative web development

Ajax AutoComplete

“A filtered dropdown with choices after entering a few characters”

How many times have you struggled with entering long lists, while you had to lookup a product or country? AJAX AutoComplete will make your life easier. Your users can get a filtered dropdown with choices after entering a few characters, enabling quick search and selection without having to enter long text.

They can even autocomplete any address, city, street and country in Google Maps with the Google search automatically. Also you can choose to store the street, city, state, country and even found Geo location in separate form fields. This will save lots of time for your customers to complete forms with addresses, as those are now auto populated based on the Ajax autocomplete address lookup field!

Overview

Features Highlights:

  • Select ID field for the autocomplete field and store it in a specific hidden field.
  • Web standards based - AJAX AutoComplete complies with the latest web standards of the W3C
  • Customization - The search box and the result list can easily be customized to fit in your site. You can apply any style using CSS.
  • Dynamic Result Lists - Generate your search suggestions using a database. The result list loads mighty fast as the extension takes full advantage of the latest AJAX technologies so only the data that has to be displayed is loaded.
  • Full Google Maps and Address search support - Now, you can autocomplete any address, city, street and country in Google Maps.
  • Autocomplete any address from the Google search automatically - Get suggested locations in real-time as you type.
  • Place a marker for the location with DMXzone Google Maps - Display the found address on Google Maps together with DMXzone Google maps extension.

Showing Thumbnails with Ajax AutoComplete 
With this movie we will show you how to show thumbnail images in Ajax AutoComplete suggestion results.

 

Mindmap Share Demo

In this demo you can see how we combined Ajax AutoComplete and Pure ASP Upload 3 in a Mindmap, where you can choose the category with the Ajax AutoComplete and upload the image with the Pure ASP Upload 3.

Autocomplete Google Maps Demo

Start filling in your address in the "Address Look Up" field. The Ajax AutoComplete will provide you with a number of options to select from. Once the selection is made the address fields to the right will be populated automatically. To change the address afterwards you can just drag and drop the marker on a new location. 

Google Maps Form Demo

Click on SEARCH and enter Address, Street, Town or Country in the "Search For" field. Select the entry that is corresponding to your search in the autocomplete list and the Address details will be loaded in the form fields. Use map controls to Zoom In and Out to fit your search context in the best possible way.

Features

Features in Detail

  • Select ID field for the autocomplete field and store it in a specific hidden field.

  • Web standards based - AJAX AutoComplete complies with the latest web standards of the W3C




  • Customization - The search box and the result list can easily be customized to fit in your site. You can apply any style using CSS.


  • Full Google Maps and Address search support - Now, you can autocomplete any address, city, street and country in Google Maps.

  • Autocomplete any address from the Google search automatically - Get suggested locations in real-time as you type.

  • Support for different language selection - The address fields come up in a specific language your choice.
  • Also if you choose to display the found address with DMXzone Google maps extension - the map will display in the selected language as well.
 
  • Store the found address in more detailed form fields automatically - Choose to store the street, city, state, country and even found Geo location in separate form fields. This will save lots of time for your customers to complete forms with addresses, as those are now auto populated based on the Ajax autocomplete address lookup field!

  • Place a marker for the location with DMXzone Google Maps - Display the found address on Google Maps together with DMXzone Google maps extension.

  • Draggable Marker - Drag the marker from the found address to a different address and automatically change all the other location fields.
  • Choose between short or long address - When splitting the found address in multiple form fields you can choose to either use the long text version of address component in the chosen language or the short version like country code. Useful when you already have a drop down with list of all countries for example and there you want to select the country automatically based on the Ajax AutoComplete address lookup field.
  • Dynamic Result Lists - Generate your search suggestions using a database. The result list loads mighty fast as the extension takes full advantage of the latest AJAX technologies so only the data that has to be displayed is loaded.

  • Predefined lists - You don’t want to use a database? No problem, we have included a great collection of standard lists with useful search lists, such as countries, European capitals, states (US) and Dutch cities.

  • Generate your AutoComplete manually - If you don’t want to use a database or the predefined templates, you can generate your result list manually, which allows you to generate any completion suggestion you like.

  • Server Side Compatibility - The extension is fully compatible with PHP or ASP, it also supports the Dreamweaver Database model so you can define your connections in Dreamweaver and load it from there.
  • JavaScript Unobtrusive - Even if your users don’t use JavaScript, they can still use the entry field as JavaScript is only used to display the entry suggestions.
  • Integrated in Dreamweaver - Interactive dialog in Dreamweaver with all the options you’ll need;
  • An inline property inspector - The property inspector enables you to change several options after you’ve added the Ajax AutoComplete

Showcases

Watch the demo to see how easy you can make a form with AutoComplete fields and an Autofill option. The first list includes all countries and is supplied with the extension, the second list includes the most popular DMXzone extensions and is included manually. If you like you can also connect the suggestions to your database.

Check out the demo read more

 

Motorcycle Dealer Demo

In this demo you can explore the possibilities of both the Ajax AutoComplete in the form fields and the Advanced HTML Editor 3 in the Featured Chopper section. In order to edit press Ctrl+Shift+2 and use username: demo, password: demo. 

*The online editing is possible with the Online Page Editor Add-on.

 

  • Travel Blog Showcase

    For this showcase we used HTML5 Data Bindings in order to connect to our database where the cities will be stored. From the available form, you can choose a city with the help of Ajax Autocomplete to ...

  • Restaurant Directions Showcase

    For this showcase we created a search field for directions, using DMXzone Google Maps and its Google Maps Directions Add-on. Also the search term is executed with Ajax Autocomplete, which can be used ...

  • Lux Decor Mobile Showcase

    For this showcase we used DMXzone Lightbox that displays the gallery images, DMXzone Google Maps to show the available locations, Ajax Autocomplete to help you when you type your current location and ...

  • Mindmap Share Showcase

    In this showcase you can see how we combined Ajax AutoComplete and Pure ASP Upload 3 in a Mindmap, where you can choose the category with the Ajax AutoComplete and upload the image with the Pure ASP ...

  • From To Directions Showcase

    In this showcase all you need to do is enter your start and ending point in order to get directions. You'll get a full directions list as well as alternative routes.

  • Sofia Sightseeing Showcase

    In this showcase you can explore the power of our Google Maps Directions Add-on for DMXzone Google Maps and Ajax AutoComplete extensions. By entering your current location the maps will provide you ...

  • Find the nearest top tourist attraction demo

    Share your location or insert an adress with Ajax Autocomplete's autofill power and the Google Maps Directions Add-on will sort it out for you in a snap!

  • Weekend in Nature Showcase

    With the help of DMXzone Google Maps, Google Maps Directions Add-on and Ajax AutoComplete you can build up a website and limit the location, where your users can search. In this showcase we will show ...

  • AutoComplete Google Maps Showcase

    Start filling in your address in the 'Address Look Up' field. The Ajax AutoComplete will provide you with a number of options to select from. Once the selection is made the address fields to the ...

  • Google Maps Autocomplete Showcase

    Click on SEARCH and enter Address, Street, Town or Country in the 'Search For' field. Select the entry that is corresponding to your search in the autocomplete list and the Address details will be ...

  • Ajax AutoComplete & HTML Editor 3 Bundle

    In this demo you can explore the possibilities of both the Ajax AutoComplete in the form fields and the Advanced HTML Editor 3 in the Featured Chopper section. In order to edit press Ctrl+Shift+2 and ...

Videos

Adding a City Search Field with Auto Completion
With this movie we will show you how easy it is to insert a city search field that uses Ajax AutoComplete on your page.

 
 

Working with Ajax AutoComplete Store ID Field Feature
With this movie we will show you how to select an ID field for the autocomplete field to store it in a specific hidden field using Ajax AutoComplete.

 

Using Google Search option in Ajax AutoComplete
With this movie we will show you how to use the autocomplete from Google search option in Ajax AutoComplete.
 
 
 

Connecting Ajax AutoComplete and DMXzone Google Maps
With this movie we will show you how to connect the Google search autocomplete option in Ajax AutoComplete with DMXzone Google Maps in order to autofill Address Form fields on your page.

 

 

Requirements

Type: Suite
License: External link
Product: Dreamweaver MX 2004, Dreamweaver 8, Dreamweaver CS3, Dreamweaver CS4, Dreamweaver CS5/CS5.5 and CS6, Dreamweaver CS5.5, Dreamweaver CC
Server Model: ASP VBScript, ColdFusion (DWMX), PHP MySQL, ASP JScript
Database: Access, SQL Server, MySQL
Browser: Chrome 9+, iPad, Safari 5+, Firefox 3.6, Firefox 4+, Chrome 10+, Opera 11


This Extension Requires:


DMXzone Google Maps

Empower full featured Google Maps in Dreamweaver!

DMXzone Google Maps is a Dreamweaver extension that enables you to unleash the power of Google Maps in just a few clicks. Add markers to cities, addresses, businesses and events with info balloons on interactive, annotated maps and integrate them in your websites! Let your visitors browse a dynamic or static map and find what they are looking for as quickly as possible. You can change marker images, show rich tooltips, pan to location and tons of other features all set up in a world featuring ...

Read More

History

Version 1.2.1

  • Full Dreamweaver CC and Extension Manager CC support
  • Improved compatibility with DMXzone Bootstrap
  • Updated the automatic file copy and update component for better Dreamweaver CC support
  • Improved compatibility with the latest jQuery
  • Included latest jQuery 1.10.1
  • Improved Windows 8 compatibility

Version 1.2.0

  • Improved compatibility with the latest DMXzone Google Maps
  • Latest jQuery 1.7.2 included
  • Improved installer for DW CS 5.5+

Version 1.0.9

  • Greatly improved Opera support
  • Improved autocomplete loading speed and display
  • Improved compatibility with newest jQuery 1.6+ versions
  • Included latest jQuery 1.6.3
  • Optimized source and files for smaller size

Version 1.0.8

  • New region limitation options to allow you to limit the address search to specific region/country
  • New language option to allow you to choose the Google Maps and AutoComplete language
  • Improved draggable route markers - after dragging the marker and new route is calculated the location is updated in the binded from/to Ajax AutoComplete fields.
  • Improved integration with Google Maps Directions Add-on
  • Improved JavaScript including on Mac OSX

Version 1.0.7

  • Full Google Maps and Address search support - Now, you can autocomplete any address, city, street and country in Google Maps.
  • Autocomplete any address from the Google search automatically - Get suggested locations in real-time as you type.
  • Support for different language selection - The address fields come up in a specific language your choice.
  • Store the found address in more detailed form fields automatically - Choose to store the street, city, state, country and even found Geo location in separate form fields. This will save lots of time for your customers to complete forms with addresses, as those are now auto populated based on the Ajax autocomplete address lookup field!
  • Place a marker for the location with DMXzone Google Maps - Display the found address on Google Maps together with DMXzone Google maps extension.
  • Draggable Marker - Drag the marker from the found address to a different address and automatically change all the other location fields.
  • Choose between short or long address - When splitting the found address in multiple form fields you can choose to either use the long text version of address component in the chosen language or the short version like country code. Useful when you already have a drop down with list of all countries for example and there you want to select the country automatically based on the Ajax AutoComplete address lookup field.

Version 1.0.6

  • New option to select ID field for the autocomplete field and store it in a specific hidden field
  • Improved compatibility with IE9
  • Great speed improvements on the Dreamweaver interface
  • Improved automatic shared file copy, synchronization and upload from Dreamweaver
  • Optimized source and CSS files for smaller size
  • Compatibility with jQuery 1.4.4+
  • Included latest jQuery

Version 1.0.5

  • Improved shared file copy and link process
  • Improved PHP 5.3 compatibility
  • Other minor improvements

 

George Petrov

George PetrovGeorge Petrov is a renowned software writer and developer whose extensive skills brought numerous extensions, articles and knowledge to the DMXzone- the online community for professional Adobe Dreamweaver users. His expertise in countless languages and technologies gives inspiration and teach valuable lessons on his website – DMXzone.com, which is visited daily by more than 30.000 people and is most popular for its over high-quality Dreamweaver extensions and templates.

See All Postings From George Petrov >>

Share this Article