Question

I can’t manage to find the solution to my problem. I have the combobox example given with JqueryUI.

My source is a Json Ajax and all this works well. But I Want to ADD an item to my combobox (I want to append it to Ajax items) manually which say “ADD A NEW ITEM” and when i click on it, my modal form becomes visible.

I put in my code some comments where I need help to explain my problem more.

 $('#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
    }
});

Edit

Here’s my autocomplete combobox code:

(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 );

Answer 1

New Answer

After a bit of thought about you’re requirements, I’ve updated my answer. Please note I worked from the JQuery UI example code as a basis.

I’ve made three changes to the combobox widget:

1. Modify your ajax success function to add the “ADD NEW ITEM” 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);

2. Output standard html within the ui-menu-item element instead of
splitting the text up with <strong> tags.

3. Added an if statement to the autocomplete select event

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

Explanation: So when an item is selected, it’s value is checked to see if it says “ADD NEW ITEM”. If it does, we show a dialog and reset the combobox to defaults.

Full code example using original JQuery UI widget (JSFiddle)

Be aware, we are editing the widget so if you’re using it for anything else, this might not be the best option. If I had more time I would look for ways of doing it without editing the widget but alas, time is short.

---

Original Answer

Append using JQuery Append()

To add a option element, use JQuerys’ append() function:

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

This will append the given html to the end of the parent element i.e. just before the closing tag: ...</select>

Here’s the documentation on append()

Or add to the element directly

An alternative would be adding the option to the select list in the html. Like this:

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

The problem with this being that the values you’re getting via ajax will most probably be appended before this.

Then, show a dialog when selected

Then you want to show a dialog when the element is selected? Ok, on the next line (after appending the new option element), add this too:

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

    // Call the dialog ...
    $( "#AddNewItemDialog").dialog();
});