Templating
It’s easy to customize the dropdown with templates. Templating is done with format_results() method and a little bit Javascript.
The following example attaches country_flag to a Select tag. It formats the results using a Javascript function named “formatCountry” to add country flag images.
<?php
$pac7 = new C_PhpAutocomplete('country_flag');
$pac7->format_results('formatCountry');
$pac7->display('SELECT');
?>
<select name="country_flag" id="country_flag">
<option></option>
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="brazil">Brazil</option>
<option value="hong_kong">Hong Kong</option>
<option value="japan">Japan</option>
<option value="united_kingdom">United Kingdom</option>
</select>
$pac7 = new C_PhpAutocomplete('country_flag');
$pac7->format_results('formatCountry');
$pac7->display('SELECT');
?>
<select name="country_flag" id="country_flag">
<option></option>
<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="brazil">Brazil</option>
<option value="hong_kong">Hong Kong</option>
<option value="japan">Japan</option>
<option value="united_kingdom">United Kingdom</option>
</select>
formatCountry is a Javascript function name.
<script>
function formatCountry(country) {
if (!country.id) return country.text; // optgroup
return "<img class='flag' src='sample_images/" + country.id.toLowerCase() + "_flag.png' style='vertical-align:middle;padding-right:5px' />" + country.text;
}
</script>
function formatCountry(country) {
if (!country.id) return country.text; // optgroup
return "<img class='flag' src='sample_images/" + country.id.toLowerCase() + "_flag.png' style='vertical-align:middle;padding-right:5px' />" + country.text;
}
</script>
