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

1 Views

I was wondering how I could setup a taxonomy metabox on a post edit page that would be similar to the “tags” kind (with search field and automatic suggestions), but without the right to add a new term.

So for example if I’m typign a word, I get suggestions of terms that I can use from the existing terms list, but if I type a word that doesn’t exist, then it doesn’t add the terms to the list.

Read More

EDIT

Actually, what I’m looking for is exactly the behavior of the “Search” functionality in the Menu Editor :

enter image description here

As this is a core WP behavior, is there a way to use it on post edit pages too ? I’m wondering because these blocks look exactly the same, both have the “view all” and “most recent” tabs, but “search” is only present in the Menu Editor.

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. 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.