Question

Sorry I couldn’t find a clear solution on how to do this.
I’m using jQuery UI autocomplete on a textbox that retrieves data from a database.
I need to add an “Add new Venue” link to the end of the list. I want to allow users to add a new venue, if the venue they’re looking for is not already in the database.

Here is my code:

$(function() {
    $("#venue").autocomplete({
        source: '<?php echo base_url();?>index.php/home/autocomplete_venue',
        minLength: 2,
        select: function(event, ui) {
            $('#venue_id').val(ui.item.id);                 
        }
    });
});

Answer 1

I suppose you could add the li in one of Autocomplete’s callbacks, like open:

$('#venue').autocomplete({
    open: function () {
        // If it's not already added
        if (!$('#ac-add-venue').length) {
            // Add it
            $('<li id="ac-add-venue"><a href="....">Add venue</a></li>').appendTo('ul.ui-autocomplete');
        }
    }
});

You may need to change some selectors.

Edit: Btw: there’s no way that can be all your code? It’s missing several closing }:s for one.