0

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.

0

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;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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