0

jquery.ui.autocompletewordpressドロップダウンのフラット カテゴリ出力を、代わりに親子カテゴリ出力に変更したいというテーマの変更に行き詰まっています。

したがって、新しい属性を定義してcategory: {$cat->parent}、レンダリングされたリストの item.label の代わりに呼び出すことを考えました ( を参照.append( "<a>" + item.category + "</a>" ))。

それがうまくいけば、親カテゴリに残りのすべてとは異なるスタイルを与えることができます. しかし、IDの代わりに名前を出力することはできません。

$cat->parentカテゴリの親-猫に対応する ID のリストをスローします (親がない場合は を与えます)。代わりに両親の名前を捨てるにはどうすればよいですか?

私が必要とするものを達成するための別のアプローチは、parent-cat-ids を取得し (以下の例のように)、出力スタイルを次のように定義することです。

  • 猫の親-猫 = 0 の場合、このスタイルを適用します
  • 猫の親猫 = 何か他のものである場合、別のスタイルを適用します

誰かが私を正しい方向に向けることができますか? 私は良いプログラマーではありません。このリスト出力を編集するのに適切な場所にたどり着くことはほとんどありませんでした。ここの誰かが私を助けてくれるなら、絶対に素晴らしいことです。テーマ フォーラムとここ (評価された場合) に変更のチュートリアルを投稿し、できる限りコミュニティに還元します。

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(/&amp;/g, "&") );
                            return false;
                        },
                        select: function( event, ui ) {
                            catInput.val( ui.item.label.replace(/&amp;/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", "" );
                    });
                }
4

1 に答える 1

0

各親カテゴリ項目に別のスタイル (テスト目的のためだけにインライン css!) を添付することができました。親 - >子の階層でアイテムを注文できれば、必要なものがすべて揃っています...

ここで誰かがこれを行う方法のヒントを教えてもらえますか? 現在のコードは次のとおりです。

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(/&amp;/g, "&") );
                        return false;
                    },
                    select: function( event, ui ) {
                        catInput.val( ui.item.label.replace(/&amp;/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", "" );
                });
            }
于 2013-11-01T18:13:03.440 に答える