document.addEvent('domready', function() {

	/**
	 * Simple example, backend returns a list of <li> elements,
	 * processed by Autocompleter.Request.HTML.
	 * /
	var inputWord = $('address_city');

	new Autocompleter.Request.HTML(inputWord, 'service/cityzip.php', {
		'indicatorClass': 'autocompleter-loading' // class added to the input during request
	});

	/**
	 * Second input with extended list and custom inject
	 * choice function. This one gets the first element
	 * for the value and marks the searched string.
	 */
	var queryField = $('address_city');

	if (!queryField) return;

	// Our instance for the element with id "demo-word2"
	new Autocompleter.Request.HTML(queryField, 'service/cityzip.php', {
		'indicatorClass': 'autocompleter-loading',
		'postData': {
			'extended': '1' // send additional POST data, check the PHP code
		},
		'injectChoice': function(choice) {
			// choice is one <li> element
			var text = choice.getFirst();
			if (text) {
			// the first element in this <li> is the <span> with the text
			var value = text.innerHTML;
			// inputValue saves value of the element for later selection
			choice.inputValue = value;
			// overrides the html with the marked query value (wrapped in a <span>)
			text.set('html', this.markQueryValue(value));
			// add the mouse events to the <li> element
			this.addChoiceEvents(choice);
			} else {
			//alert(choice);
			}
		}
	});

});