get parent cat name in wordpress - theme modification

Question

I'm stuck with a theme modification where i want to change the flat category output of a wordpress jquery.ui.autocomplete drop down with a parent-child category output instead.

Therefore i thought to define the new attribute category: {$cat->parent} and call it instead of item.label in the rendered list (see .append( "<a>" + item.category + "</a>" ) ).

If that would work, i could give parent categories a different styling than all the rest. But i can't manage to output the names instead of the ids.

$cat->parent throws out a list of ids corresponding to the categories parent-cat (giving , when there is no parent). How can i throw out the parents name instead?

---

another approach to achieve what i need would be to get the parent-cat-ids (as the example below does) and then define the output style like:

• if cat's parent-cat = 0, then apply this style
• if cat's parent-cat = something-else, then apply another style

Can anyone point me in the right direction? I'm not a good programer. I hardly made my way up to the right place to edit this list-output. Would be absolutely GREAT if someone here can help me out. I'll post a tutorial for the modification in the theme-forum and here (if it's appreciated) to give back to the community as much as I can.

jQuery(document).ready(function($) {

                var categories = [
                {foreach $categories as $cat}
                    { category: {$cat->parent}, value: {$cat->term_id}, label: {$cat->name} }{if !($iterator->last)},{/if}
                {/foreach}
                ];
                var locations = [
                {foreach $locations as $loc}
                    { value: {$loc->term_id}, label: {$loc->name} }{if !($iterator->last)},{/if}
                {/foreach}
                ];
                var catInput = $( "#dir-searchinput-category" ),
                    catInputID = $( "#dir-searchinput-category-id" ),
                    locInput = $( "#dir-searchinput-location" ),
                    locInputID = $( "#dir-searchinput-location-id" );

                if(catInput.length > 0) {
                    catInput.autocomplete({
                        minLength: 0,
                        source: categories,
                        focus: function( event, ui ) {
                            catInput.val( ui.item.label.replace(/&/g, "&") );
                            return false;
                        },
                        select: function( event, ui ) {
                            catInput.val( ui.item.label.replace(/&/g, "&") );
                            catInputID.val( ui.item.value );
                            return false;
                        }
                    }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
                        return $( "<li>" )
                            .data( "item.autocomplete", item )
                            .append( "<a>" + item.category + "</a>" )
                            .appendTo( ul );
                    };
                    var catList = catInput.autocomplete( "widget" );
                    catList.niceScroll({ autohidemode: false });

                    catInput.click(function(){
                        catInput.val('');
                        catInputID.val('0');
                        catInput.autocomplete( "search", "" );
                    });
                }

Answer 1

I've managed to attach another style (inline css just for test-purpose!) to each parent category-item. If I'd be able to order the items by parent->child hierarchy now, 'd have what i need...

can someone here give me a hint how to do this? Here's the current code:

jQuery(document).ready(function($) {

            var categories = [
            {foreach $categories as $cat}
                { category: {$cat->parent}, value: {$cat->term_id}, label: {$cat->name} }{if !($iterator->last)},{/if}
            {/foreach}
            ];
            var locations = [
            {foreach $locations as $loc}
                { value: {$loc->term_id}, label: {$loc->name} }{if !($iterator->last)},{/if}
            {/foreach}
            ];
            var catInput = $( "#dir-searchinput-category" ),
                catInputID = $( "#dir-searchinput-category-id" ),
                locInput = $( "#dir-searchinput-location" ),
                locInputID = $( "#dir-searchinput-location-id" );

            if(catInput.length > 0) {
                catInput.autocomplete({
                    minLength: 0,
                    source: categories,
                    focus: function( event, ui ) {
                        catInput.val( ui.item.label.replace(/&/g, "&") );
                        return false;
                    },
                    select: function( event, ui ) {
                        catInput.val( ui.item.label.replace(/&/g, "&") );
                        catInputID.val( ui.item.value );
                        return false;
                    }
                }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
                    if ( item.category != 0 ) {
                            return $( "<li>" )
                            .data( "item.autocomplete", item )
                            .append( "<a>" + item.label + "</a>" )
                            .appendTo( ul );       
                            }
                    else {
                    return $( "<li>" )
                    .data( "item.autocomplete", item )
                    .append( "<a style='font-weight:bold;'>" + item.label + "</a>" )
                    .appendTo( ul );       
                    }
                };
                var catList = catInput.autocomplete( "widget" );
                catList.niceScroll({ autohidemode: false });

                catInput.click(function(){
                    catInput.val('');
                    catInputID.val('0');
                    catInput.autocomplete( "search", "" );
                });
            }