WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm trying to set up a customized searchform that will allow the visitor to search posts linked to term(s) of several taxonomies. The autocomplete part seems to work fine, but I've no idea how to get the term slug so I can build the query string once the visitor has selected the term name.

Here is the HTML:


    <div class="">
        <label for="collection">Collections : </label>
        <input id="collection">

    <div class="">
        <label for="sujet">Sujets : </label>
        <input id="sujet">

    <div class="">
        <label for="lieu">Lieux : </label>
        <input id="lieu">

    <div class="">
        <label for="tag_perso">Mots-clés : </label>
        <input id="tag_perso">


The Javascript:

jQuery(function() {

jQuery( "#collection" ).autocomplete({ source: availableTags.collection });
jQuery( "#sujet" ).autocomplete({ source: availableTags.sujet });
jQuery( "#lieu" ).autocomplete({ source: availableTags.lieu });
jQuery( "#tag_perso" ).autocomplete({ source: availableTags.tag_perso });

and the PHP:

function get_autocomplete_source($taxonomy) {
$args = array(
    'hide_empty'    => 0,
    'fields'        => 'all',
$term_objects = get_terms($taxonomy, $args);
$terms = array();
foreach ($term_objects as $term_object) 
    $return_object = new stdClass;
    $return_object->value = $term_object->name;
    $return_object->slug = $term_object->slug;
    $terms[] = $return_object;
return $terms;}

the script having been localized this way:

wp_localize_script('cevennes_autocomplete', 'availableTags', array(
'collection'    => get_autocomplete_source('1-collection'),
'sujet'         => get_autocomplete_source('2-sujet'),
'lieu'          => get_autocomplete_source('3-lieu'),
'tag_perso'     => get_autocomplete_source('4-tag_perso')

I'm a bit lost with Javascript. Could someone help? Thanks a lot.

share|improve this question
up vote 0 down vote accepted

Here is my solution:

1.HTML: I defined two fields for each taxonomy, one visible for the selection/autocompletion of the term label; the second one, hidden, for receiving the corresponding value (term slug). For a typical category, it looks like:

<input id="collection" type="text" placeholder="Collection">
<input id="collection-value" class="hidden-field" name="1-collection">

2.Javascript: the default events focus and select have been changed in order to fill both label and value fields:

jQuery( "#collection" ).autocomplete({ 
    source: availableTags.collection,
    focus: function(event, ui) {
    // prevent autocomplete from updating the textbox
    // manually update the textbox
    select: function(event, ui) {
    // prevent autocomplete from updating the textbox
    // manually update the textbox and hidden field

3.PHP has : 2 lines have been modified in order to return label and value:

$return_object->label = $term_object->name;
$return_object->value = $term_object->slug;
share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.