Templating – PHP Autocomplete https://phpautocomplete.com The Ultimate PHP Dropdown Thu, 09 Feb 2023 22:25:21 +0000 en-US hourly 1 https://wordpress.org/?v=7.0.4 format_selection() https://phpautocomplete.com/docs/format_selection-2/ Fri, 14 Feb 2014 17:33:51 +0000 http://phpautocomplete.com/?p=131 Template function to format the selection after user chose an option

Signature:

public function format_selection($js_format_function)

Parameters:

  • $js_format_function: JavaScript function to format the selection
]]> format_results() https://phpautocomplete.com/docs/format_results/ Fri, 14 Feb 2014 17:30:38 +0000 http://phpautocomplete.com/?p=128 Template function to format list of selections that user can select

Signature:

public function format_results($js_format_function, string $frmt_result_css = '' )

Parameters:

  • $js_format_function: JavaScript function to format the selection
  • $frmt_result_css: Function used to add css classes to result elements.
]]> Templating https://phpautocomplete.com/examples/templating/ Tue, 04 Feb 2014 00:10:59 +0000 http://phpautocomplete.com/?p=81 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>

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>
]]>