Ajax AutoComplete

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.

 

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.
  

• 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;
  

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 

 

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.

 

• 

  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.

Requirements

History

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