Using WordPress built-in tag auto complete script in your Plugins

When I released my Posts By Tag WordPress Plugin, I promised to write a post explaining how to use the built-in auto complete tags script in WordPress, and so here is how you do it. 😉

jQuery Plugin

WordPress has a jQuery Plugin called suggest, which will do the heavy lifting for us. To use this Plugin, you have to first enqueue the script using the wp_enqueue_script() function

// Register hooks
add_action('admin_print_scripts', 'add_script');

/**
 * Add script to admin page
 */
function add_script() {
    // Build in tag auto complete script
    wp_enqueue_script( 'suggest' );
}

Once the script is included, you have to just call a method called suggest on your jQuery collection and everything else will be taken care for you.

<?php
/**
 * add script to admin page
 */
function add_script_config() {
?>

    <script type="text/javascript" >
    // Function to add auto suggest
    function setSuggest(id) {
        jQuery('#' + id).suggest("<?php echo get_bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php?action=ajax-tag-search&tax=post_tag");
    }
    </script>
<?php
}
?>

If you want to support multiple tags, then you can use the following options.

  • multiple – to enable multiple tags to be entered, pass true
  • multipleSep – The separator symbol for multiple tags

so the code will be

<?php
/**
 * add script to admin page
 */
function add_script_config() {
?>

    <script type="text/javascript" >
    // Function to add auto suggest
    function setSuggest(id) {
        jQuery('#' + id).suggest("<?php echo get_bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php?action=ajax-tag-search&tax=post_tag", {multiple:true, multipleSep: ","});
    }
    </script>
<?php
}
?>

You can also use this script to auto complete other custom taxonomies, which were introduced in WordPress 2.8. For that you have to change the tax parameter in the url. The following are the default taxonomies that are available.

  • post_tag
  • link_category
  • category

In addition to them you can also use your custom taxonomies.

So the complete code is

<?php
// Register hooks
add_action('admin_print_scripts', 'add_script');
add_action('admin_head', 'add_script_config');

/**
 * Add script to admin page
 */
function add_script() {
    // Build in tag auto complete script
    wp_enqueue_script( 'suggest' );
}

/**
 * add script to admin page
 */
function add_script_config() {
?>

    <script type="text/javascript" >
    // Function to add auto suggest
    function setSuggest(id) {
        jQuery('#' + id).suggest("<?php echo get_bloginfo('wpurl'); ?>/wp-admin/admin-ajax.php?action=ajax-tag-search&tax=post_tag", {multiple:true, multipleSep: ","});
    }
    </script>
<?php
}
?>


The only cavet to this method is that right now the admin-ajax.php file needs you to be logged in and therefore can only be used in admin pages. But in WordPress 2.9 even anonymous users can load admin-ajax.php file. If you need use auto tag completing in blog pages, then you may have to wait till 2.9 is released 🙂

Related posts

Tags: , , ,

20 Comments so far

Follow up comments through RSS Feed | Post a comment

  • Mafisto says:

    i have a question i have here a php code is it posible to have this code aktive on a sidebar ass a widget on wordpres
    here is the code

    opensidex(“Bans Anticheat”);

    function counting($select, $from) {
    $result = mysql_query(“SELECT $select FROM $from”);
    $num_rows = mysql_num_rows($result);
    return $num_rows;
    }

    function counting2($select, $from, $where, $is) {
    $result = mysql_query(“SELECT $select FROM $from WHERE $where =’$is'”);
    $num_rows = mysql_num_rows($result);
    return $num_rows;
    }

    function counting3($select, $from) {
    $result = mysql_query(“SELECT $select FROM $from”);
    $num_rows = mysql_num_rows($result);
    return $num_rows;
    }
    $refusescans = “”;
    $cheatbuster = counting2(“bid”, “amx_bans”, “dirty”, “dirty”);
    $steambans = counting2(“bid”, “amx_bans”, “dirty”, “sbban”);
    $cleanscans = counting2(“bid”, “amx_bans”, “dirty”, “clean”);
    $demobans = counting2(“bid”, “amx_bans”, “dirty”, “demo”);
    $acautobans = counting3(“bid”,”amx_autobans”);
    $sbautobans = counting(“id”,”steambans”);
    $radarbans = counting2(“bid”, “amx_bans”, “dirty”, “radar”);
    $ialt = $cheatbuster + $steambans + $refusescans + $demobans + $radarbans;
    $scansialt = $cleanscans + $cheatbuster;
    $fstart = “”;
    $fslut = “”;

    echo “CleanScans [“.$fstart . $cleanscans. $fslut .”]”;
    echo “DirtyScans [“.$fstart . $cheatbuster . $fslut .”]”;

    echo “Ac-Bans [“.$fstart . $steambans . $fslut .”]”;
    // echo “SBautoBans [“.$fstart . $sbautobans . $fslut .”]”;
    echo “RadarBans [“.$fstart . $radarbans . $fslut .”]”;
    echo “AC-Demobans [“.$fstart . $demobans . $fslut .”]”;
    echo””;
    echo “AC-AutoBans [“.$fstart . $acautobans . $fslut .”]”;
    echo “Scans i alt [“.$fstart . $scansialt. $fslut .”]”;
    echo “Bans i alt [“.$fstart . $ialt . $fslut .”]”;
    closeside();

    the exampel in aktion is here http://www.anticheat.org no need to login
    i really need this information on a wordpress site i have

  • Mafisto says:

    hey sudar again i did get the plugin and activate it
    so thats it i realy dont know how to get this php code i posted to work on my widget/sidebar after this was done sorry for my stupid questions

  • khan says:

    can you please guide me that how can I add the auto load functionality to my text filed , I have added to my custom form ? I am newbie please guide me in detail. I will really appreciate your effort.

  • shetle says:

    I found some link on http://www.sagefix.com but I don’t remember, you can search for that

  • Pushpinder says:

    I tried to install this code.

    Its giving an error when I click in the textfield that – setSuggest is not defined

    any clues why?

  • Pushpinder says:

    well, I managed to get the function appear in the page head albeit its not working

    see here

    http://www.bigonlinetips.com/?ptype=ask-a-question

    I intend to use it on the tags field but it given an error – jQuery(“#” + id).suggest is not a function

    Please help!

  • Pushpinder says:

    I found a little something

    // this hook is fired if the current viewer is not logged in
    do_action( ‘wp_ajax_nopriv_’ . $_REQUEST[‘action’] );

    or

    add_action(‘wp_ajax_nopriv_my_action’, ‘my_action_callback’);

    More at

    http://codex.wordpress.org/AJAX_in_Plugins
    and
    http://www.wphardcore.com/2010/5-tips-for-using-ajax-in-wordpress/

    Could you please update this script now.

  • mxn says:

    gr8 piece of information…thanks for providing……

  • hey thanks for the info…

  • christian says:

    Thanks so much! And I got this working outside of the admin area by getting these lines of code from wp-admin-dev.css and putting them in my theme’s CSS file.

    .ac_results {
    	padding: 0;
    	margin: 0;
    	list-style: none;
    	position: absolute;
    	z-index: 10000;
    	display: none;
    	border-width: 1px;
    	border-style: solid;
    }
    
    .ac_results li {
    	padding: 2px 5px;
    	white-space: nowrap;
    	text-align: left;
    }
    
    .ac_over {
    	cursor: pointer;
    }
    
    .ac_match {
    	text-decoration: underline;
    }
  • I thought I got this working once, but maybe I am hallucinating. Cannot get any autosuggest magic in a custom front form.

    One major detail missing here that i got from the plugin in github is that something needs to call setSuggest(id); the code has form field inputs with onfocus=”setSuggest(‘widget_tag’)”

    I inserted an alert line inside the function and it is firing the message, but the ajax call does nothing.

    I’m ready to give up!

    • Actually I was missing the CSS provided by Christian in an earlier comment. I could trace in the browser developer console the successful calls to the ajax script and its response; but without any CSS to display the suggested tags. nothing appears to happen.

      Now it works!

  • Brendan says:

    How does the setSuggest() JS function ever get called? There is not call to it in this script as far as I can see.

  • WP_user says:

    Thanks a lot for your post. It’s 2017 now, but it still works!

1 Tweetbacks so far

5 Trackbacks/Pingbacks so far

Leave a Reply

Your email address will not be published. Required fields are marked *