autocomplete.md

Autocomplete

The Places Autocomplete feature attaches to a text field on your web page, and monitors that field for character entries. As text is entered, Autocomplete returns Place predictions to the application in the form of a drop-down pick list. You can use the Places Autocomplete feature to help users find a specific location, or assist them with filling out address fields in online forms.

Build your autocomplete

In order to use the Google Autocomplete feature, you need to build & configure it.

use Ivory\GoogleMap\Places\Autocomplete;
use Ivory\GoogleMap\Places\AutocompleteComponentRestriction;
use Ivory\GoogleMap\Places\AutocompleteType;

$autocomplete = new Autocomplete();

$autocomplete->setPrefixJavascriptVariable('place_autocomplete_');
$autocomplete->setInputId('place_input');

$autocomplete->setInputAttributes(array('class' => 'my-class'));
$autocomplete->setInputAttribute('class', 'my-class');

$autocomplete->setValue('foo');

$autocomplete->setTypes(array(AutocompleteType::ESTABLISHMENT));
$autocomplete->setComponentRestrictions(array(AutocompleteComponentRestriction::COUNTRY => 'fr'));
$autocomplete->setBound(-2.1, -3.9, 2.6, 1.4, true, true);

$autocomplete->setAsync(false);
$autocomplete->setLanguage('en');

Render your autocomplete

Now, you have builded & configured your autocomplete, you can render it. For this purpose, you will need the Ivory\GoogleMap\Helper\Places\AutocompleteHelper which allows to render the autocomplete html container & some javascript for being able to render it.

use Ivory\GoogleMap\Helper\Places\AutocompleteHelper;

$autocompleteHelper = new AutocompleteHelper();

Render the HTML container

echo $autocompleteHelper->renderHtmlContainer($autocomplete);

This function renders an html input with the ID, the value & the html attributes:

<input id="place_autocomplete" type="text" placeholder="off" value="foo" />

Render the javascript

echo $autocompleteHelper->renderJavascripts($autocomplete);

This function renders an html javascript block with all code needed for displaying your autocomplete.

<script type="text/javascript">
    // Code needed for displaying your autocomplete
</script>