Pods CMS » Packages » Autocomplete Input Helper

Autocomplete Input Helper

Version 1.0 added 6 months ago by tokyograph

{"meta":{"version":"180","build":"1263276708"},"helpers":[{"name":"jquery_autocomplete","helper_type":"input","phpcode":"<?php\n\nglobal $_autocomplete_script_url;\n\n\/\/ USER: set this url to the location of your jquery.autocomplete.js script\n$_autocomplete_script_url = get_bloginfo('url') . '\/wp-content\/js\/jquery-autocomplete\/jquery.autocomplete.js';\n\n\/\/ define this function once\nif (!function_exists('insert_autocomplete_script')) {\n    function insert_autocomplete_script() {\n        global $_autocomplete_script, $_autocomplete_script_url;\n        \/\/ add script to page only once\n        if (!$_autocomplete_script) {\n            echo '<script type=\"text\/javascript\" src=\"', $_autocomplete_script_url, '\"><\/script>';\n            $_autocomplete_script = true;\n        }\n    }\n}\n\n\/\/ this script currently works only for non-multiple PICK fields\nif ($coltype === 'pick' && $field['multiple'] == 0) {\n    \/\/ make sure the options are an array\n    if (!empty($value) && is_array($value)) {\n        $selected = false;\n        $choices = array();\n        foreach ($value as $key => $val) {\n            \/\/ find the current selected value\n            if (!empty($val['active'])) {\n                $selected = $val;\n            }\n            \/\/ build the options array for the autocomplete script\n            $choices[] = '[\"' . str_replace('\"', '&quot;', $val['name']) . '\", \"' . $val['id'] . '\"]';\n        }\n        \/\/ hidden field for the actual value\n        echo '<input type=\"hidden\" class=\"form ', $name, ' hidden\" value=\"' . ($selected ? $selected['id'] : '') . '\" \/>';\n        \/\/ visible field for the user input\n        echo '<input type=\"text\" class=\"form txt ', $name, 'Helper\" value=\"' . ($selected ? $selected['name'] : '') . '\" \/>';\n?>\n\n<?php\n\/\/ add the autocomplete script to the page\nif (function_exists('insert_autocomplete_script')) {\n    insert_autocomplete_script();\n}\n?>\n<script type=\"text\/javascript\">\nvar <?php echo $name; ?>Data = [<?php echo implode(', ', $choices); ?>];\njQuery(\".<?php echo $name; ?>Helper\").autocomplete(<?php echo $name; ?>Data, {\n    matchContains: true,\n    formatItem: function(row) {\n        return row[0].replace('&quot;', '\"');\n    },\n    formatResult: function(row) {\n        return row[0].replace('&quot;', '\"');\n    }\n}).result(function(event, data, formatted) {\n    var hidden = jQuery(this).parent().prev().find(\">:input\");\n    if (data == undefined) {\n        jQuery(this).val('');\n        hidden.val('');\n    }\n    else {\n        hidden.val(data[1]);\n    }\n}).blur(function() {\n    jQuery(this).search();\n});\n<\/script>\n\n<?php\n    }\n    else {\n        echo 'Error: $value is not an array'; \/\/ error with $value from input_fields.php\n    }\n}\nelse {\n    echo 'This helper is available only for non-multiple PICK fields.'; \/\/ not a PICK field, or is a multiple field\n}\n\n?>"}]}

1.0 Notes

About this Package

This input helper can be used for single PICK fields. It will turn the dropdown select menu into a text input field with the jQuery Autocomplete plugin (http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/).

Multi-select PICK fields are not currently supported. The helper uses the option 'matchContains'; you can modify the helper to meet your own specific needs (see the documentation on the Autocomplete options: http://docs.jquery.com/Plugins/Autocomplete/autocomplete#url_or_dataoptions).

--------------------
INSTRUCTIONS
--------------------

In order to use this helper, make sure to download the Autocomplete plugin at http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ and upload it to your server. In Line 6 of the helper code, set the variable $_autocomplete_script_url to the location of your jquery.autocomplete.js file (you can also use the pack or min version if you want).