3

我无法找到解决问题的方法。我有 JqueryUI 给出的组合框示例。

我的来源是 Json Ajax，所有这些都运行良好。但我想手动将一个项目添加到我的组合框（我想将其附加到 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 示例代码为基础。

我对组合框小部件进行了三处更改：

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;
}

说明：所以当一个项目被选中时，它的值会被检查以查看它是否显示“添加新项目”。如果是这样，我们会显示一个对话框并将组合框重置为默认值。

使用原始 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 回答