How can I create a taxonomy meta-box with search suggestions but no new terms input?

Question

I came up with a solution for your first question. i.e the tax metabox that only suggests terms from existing terms list but does not allow you to add new terms. The solution is jQuery based and modifies the default behavior of the tags (i.e non heirarchical taxonomies) meta box.

Limitation: Currently it only allows to add 1 term at a time, that is you can’t add multiple existing terms as comma separated values.

The code is also available as github’s gist.

I might do menu editor like metabox for taxonomy on next weekend. 😉

the solution below can be used as plugin as can be used in your function.php file too.

<?php
/*
Plugin Name: No new terms taxonomy meta box
Plugin URI: https://gist.github.com/1074801
Description: Modifies the behavior of the taxonomy box, forbids user from selecting terms that don't belong to taxonomy.
Author: Hameedullah Khan
Author URI: http://hameedullah.com
Version: 0.1
License: Do what ever you like, but don't publish it under your name without improving it.
 */

/*
 * For more information: http://wordpress.stackexchange.com/questions/20921/
 */

// currently works only with single taxonomy which should be defined here
// default is the built-in post_tag
define('CTM_TAXONOMY_NAME', 'post_tag');

function ctm_custom_tax_js() {

    // taxonomy name not defined or set to empty value
    if ( !defined('CTM_TAXONOMY_NAME') || !CTM_TAXONOMY_NAME ) {
        return;
    }
?>
<script type="text/javascript">


    function ctm_custom_termadd_handler(event){
            var tax = '<?php echo CTM_TAXONOMY_NAME; ?>';
            var input = jQuery('#tagsdiv-<?php echo CTM_TAXONOMY_NAME; ?> input.newtag');

            var q = input.val().split(',');

            // if there are more then two values, just add the first one
            // NOTE: because this solution does not support inserting multiple terms
            if (q.length > 1) {
                q = jQuery.trim(q[0]);

                // as we don't support multiple terms
                // set the value of input box to the first term
                input.val(q);
            }

            jQuery.get( ajaxurl + '?action=ajax-tag-search&tax=' + tax + '&q=' + q, function(results) {
                var tokens = results.split('\n');
                for (var i=0; i < tokens.length; i++) {
                    token = jQuery.trim(tokens[i]);
                    if ( token && token == q ) {
                        (function($){
                            tagBox.flushTags( $('#tagsdiv-<?php echo CTM_TAXONOMY_NAME; ?>') );
                        })(jQuery);

                        return true;
                    }
                }

            } );
            event.stopImmediatePropagation();
            return false;
    }

    function ctm_custom_key_handler(event) {
        if (13 == event.which) {
            ctm_custom_termadd_handler(event);
            return false;
        }
        return true;
    }

    jQuery(document).ready(function() {
        // unbiind the click event from the taxonomy box
        jQuery('#tagsdiv-<?php echo CTM_TAXONOMY_NAME; ?> input.tagadd').unbind('click');
        jQuery('#tagsdiv-<?php echo CTM_TAXONOMY_NAME; ?> input.newtag').unbind('keyup');

        // hide the howto text for inserting multiple terms
        // NOTE: because this solution does not support inserting multiple terms
        jQuery('#tagsdiv-<?php echo CTM_TAXONOMY_NAME; ?> p.howto').hide();

        // bind our custom handler
        jQuery('#tagsdiv-<?php echo CTM_TAXONOMY_NAME; ?> input.tagadd').click(ctm_custom_termadd_handler);
        jQuery('#tagsdiv-<?php echo CTM_TAXONOMY_NAME; ?> input.newtag').keyup(ctm_custom_key_handler);
    });

</script>

<?php
}
add_action('admin_footer-post-new.php', 'ctm_custom_tax_js');
add_action('admin_footer-post.php', 'ctm_custom_tax_js');
?>

UPDATE: code updated to handle the return key as per @mike’s comment.

Leave a Comment Cancel reply