Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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:

    <fieldset>

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

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

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

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

</fieldset>

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

1 Answer 1

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
    event.preventDefault();
    // manually update the textbox
    jQuery(this).val(ui.item.label);
    },
    select: function(event, ui) {
    // prevent autocomplete from updating the textbox
    event.preventDefault();
    // manually update the textbox and hidden field
    jQuery(this).val(ui.item.label);
    jQuery("#collection-value").val(ui.item.value);
    }
});

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

 
discard

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.