Inserting an html button as the last element of a jquery ui autocomplete list

Question

I have been trying to insert an html button as the last element of an jquery ui autocomplete list. The button is supposed to open a popup window with the option of adding a new element to the autocomplete list. This is the code which inserts the button inside the autocomplete list:

data.push({label: '<input type="button" name="btn_name_field" id="btn_name_field" title="Create" class="button firstChild" value="Add new">'});
response(data);

This is the function that opens the popup:

$(document).on("click", "#btn_name_field", function () {
    open_popup("Street_Address", 400, 180, "", true, false,  {"call_back_function":"set_return","form_name":"EditView"}, "single", true );
});

In order to be able to insert the html inside as a "label", I had to use this function:

$[ "ui" ][ "autocomplete" ].prototype["_renderItem"] = function( ul, item) {
return $( "<li></li>" ) 
  .data( "item.autocomplete", item )
  .append( $( "<a></a>" ).html( item.label ) )
  .appendTo( ul );
};

What happens is: The button appears fine and does what it is supposed to (opens a popup window) However after opening the popup window all the code from the html input gets inserted into the textbox. This is the logical behaviour, since the code is inserted as a label, but would anybody know what would be the best way to insert an html button as the last element of the autocomplete?

Thanks in advance

Answer 1

If you're using jQueryUI >= 1.9, this seems like a good job for the response callback. This callback is called right after the source array is populated, but before the items are displayed to the user. You can leverage this event to push a new "button" object on your array of suggestions.

This "button" object has a label property that's the HTML of the button you're going to add, and it also has a button property that's set to true. You can use this property to cancel the default action of the select event:

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

$("#auto").autocomplete({
    source: /* source */
    response: function (event, ui) {
        // Add the "button" object to the list of suggestions:
        ui.content.push({
            label: "<input type='button' value='click me' class='mybutton' />",
            button: true
        });
    },
    select: function (event, ui) {
        // If this is the button, don't populate the <input>
        if (ui.item.button) {
            event.preventDefault();
        }
    }
});

Also, I would recommend using a delegated event handler instead of writing your event handling code inside of the markup you're generating for the button. One way to do this is to give your button a class (I've used .mybutton in the example), and write a delegated event handler using on:

$(document).on("click", ".mybutton", function () {
    alert('clicked!');
});

Here's a working example: http://jsfiddle.net/J5rVP/35/