3

問題の解決策を見つけることができません。JqueryUI で指定されたコンボボックスの例があります。

私のソースは Json Ajax であり、これはすべてうまく機能します。しかし、「ADD A NEW ITEM」というアイテムを手動でコンボボックスに追加したい(Ajaxアイテムに追加したい)と、それをクリックするとモーダルフォームが表示されます。

問題をさらに説明するために助けが必要なコードにいくつかのコメントを入れました。

 $('#combobox_scenario').combobox({
    source: function( request, response ) {
        $.ajax({
            url: "?module=gestionApplication&action=getListeScenarios&option="+encodeURI($(".ui-combobox:first input").val()),
            dataType: "json",
            success: function( data ) {
                response( $.map( data, function( item ) {
                    return {
                        label: item.test,
                        value: item.test,
                        option: this
                    }
                }));
                //I want to add an item Here !
                //response.add({label: 'Ajouter un Scénario',value: 'Ajouter un Scénario',option : this});
                console.log(response);
            }
        });
    },
    selected: function(event, ui) {
        var scenario = ui.item2;
        //if (scenario = "This Item added manually") 
            //MyForm.show()
        //else
            $.ajax({
                url: "?module=gestionApplication&action=getScenario&option="+encodeURI(scenario),
                dataType: "json",
                success: function( data ) {
                    data = data[0];
                    $("#scenario").show();
                    $("#scenario").html('<hr><h2>Informations sur le scénario '+data.TEST+'</h2><p>Description : '+data.DESCRIPTION+'</p>'+'<p>Application : '+data.APPLICATION+'</p>');
                }
            });
        //EndIf
    }
});

編集

これが私のオートコンプリートコンボボックスコードです:

(function( $ ) {
$.widget( "ui.combobox", {
    _create: function() {
        var input,
            self = this,
            source = this.options,
            select = this.element.hide(),
            selected = select.children( ":selected" ),
            value = selected.val() ? selected.text() : "",
            wrapper = this.wrapper = $( "<span>" )
                .addClass( "ui-combobox" )
                .insertAfter( select );
        input = $( "<input>" )
            .appendTo( wrapper )
            .val( value )
            .addClass( "ui-state-default ui-combobox-input" )
            .autocomplete({
                delay: 0,
                minLength: 0,

                // Need define source in my main js
                source: this.options.source,
                select: function( event, ui ) {
                    ui.item.option.selected = true;
                    self._trigger( "selected", event, {
                        item: ui.item.option,
                        item2 : ui.item.label
                    });
                },
                change: function( event, ui ) {
                    if ( !ui.item ) {

                        var matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( $(this).val() ) + "$", "i" ),
                            valid = false;
                        select.children( "option" ).each(function() {
                            if ( $( this ).text().match( matcher ) ) {
                                this.selected = valid = true;
                                return false;
                            }
                        });
                        if ( !valid ) {
                            // remove invalid value, as it didn't match anything
                            $( this ).val( "" );
                            select.val( "" );
                            input.data( "autocomplete" ).term = "";
                            return false;
                        }
                    }
                }
            })
            .addClass( "ui-widget ui-widget-content ui-corner-left" );

        input.data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>" + item.label + "</a>" )
                .appendTo( ul );
        };

        $( "<a>" )
            .attr( "tabIndex", -1 )
            .attr( "title", "Show All Items" )
            .appendTo( wrapper )
            .button({
                icons: {
                    primary: "ui-icon-triangle-1-s"
                },
                text: false
            })
            .removeClass( "ui-corner-all" )
            .addClass( "ui-corner-right ui-combobox-toggle" )
            .click(function() {
                // close if already visible
                if ( input.autocomplete( "widget" ).is( ":visible" ) ) {
                    input.autocomplete( "close" );
                    return;
                }

                // work around a bug (likely same cause as #5265)
                $( this ).blur();

                // pass empty string as value to search for, displaying all results
                input.autocomplete( "search", "" );
                input.focus();
            });
    },

    destroy: function() {
        this.wrapper.remove();
        this.element.show();
        $.Widget.prototype.destroy.call( this );
    }
});
})( jQuery );
4

1 に答える 1

4

新しい答え

あなたの要件について少し考えた後、回答を更新しました。私は、 JQuery UI のサンプルコードをベースとして作業したことに注意してください。

コンボボックス ウィジェットに 3 つの変更を加えました。

1. ajax 成功関数を変更して、「ADD NEW ITEM」項目を追加します。

var responseContainer = $.map( data, function( item ) {
    return {
        label: item.test,
        value: item.test,
        option: this
    };
})
responseContainer.push({label:'ADD NEW ITEM',value:'ADD NEW ITEM',option:this});
response(responseContainer);

<strong>2.タグでテキストを分割する代わりに、ui-menu-item 要素内に標準の html を出力します。

3. オートコンプリート選択イベントに if ステートメントを追加しました

if(ui.item.value == "ADD NEW ITEM") {
    $("#dialog").dialog();
    $( this ).val( "" );
    select.val( "" );
    input.data( "autocomplete" ).term = "";
    return false;
}        

説明:そのため、アイテムが選択されると、その値が「ADD NEW ITEM」と表示されているかどうかがチェックされます。存在する場合は、ダイアログを表示し、コンボボックスをデフォルトにリセットします。

オリジナルの JQuery UI ウィジェット (JSFiddle) を使用した完全なコード例

ウィジェットを編集しているため、他の目的で使用している場合、これは最適なオプションではない可能性があることに注意してください。もっと時間があれば、ウィジェットを編集せずにそれを行う方法を探しますが、残念ながら、時間は短いです。


元の回答

JQuery Append() を使用して追加する

オプション要素を追加するには、JQuerys の append() 関数を使用します。

$('select#combobox_scenario').append('<option id="Combobox_Item_AddNewItem" value="Combobox_Item_AddNewItem">ADD A NEW ITEM</option>');

これにより、指定された html が親要素の末尾、つまり終了タグの直前に追加されます。...</select>

append()に関するドキュメントは次のとおりです。

または、要素に直接追加します

別の方法は、html の選択リストにオプションを追加することです。このような:

<select>
    // ...
    <option id="Combobox_Item_AddNewItem" value="Combobox_Item_AddNewItem">ADD A NEW ITEM</option>
</select>

これに関する問題は、ajax を介して取得している値がおそらくこのに追加されることです。

次に、選択時にダイアログを表示します

次に、要素が選択されたときにダイアログを表示しますか? 次の行 (新しいオプション要素を追加した後) に、これも追加します。

$("#Combobox_Item_AddNewItem").live("click", function() {

    // Call the dialog ...
    $( "#AddNewItemDialog").dialog();
});
于 2012-07-24T13:37:03.830 に答える