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;