Question

I am modifying some jquery autocomplete code. The current code works fine, and the response list is generated programmatically, but I want to add a hard coded “All Companies” at the top of my response list, which will act just like the other entries in the response list. Here is the code I am working with:

    $(function() {
    $( "#report_generator_search" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "lib/test.php",
                dataType: "json",
                type: "POST",
                data: {
                    action: "search_test",
                    featureClass: "P",
                    style: "full",
                    maxRows: 24,
                    searchTerm: request.term
                },
                success: function( f ) {
                    response( $.map( f, function( item ) {
                        return {
                            label: item.company_name + ' ('+item.company_id+') ' + item.generator_address,
                            value: item.company_name,
                            company_id: item.company_id
                        }
                    }));        
                }
            });
        },
        minLength: 1,
    });

I have tried simply adding another response, but no go:

    response( $.map( f, function( item ) {
                        return {
                        label: "All Companies",
                        value: "All Companies",
                        company_id: ""
                    }
                    }));

And I have tried prepending, which puts “All Companies” at the top but the button doesn’t function at all like the other list elements:

    $('.ui-autocomplete').prepend('<li class="ui-menu-item" role="menuitem"><a class="ui-corner-all" tabindex="-1">All Companies</a></li>');

Any help would be appreciated. Thank you.

Answer 1

You can only call response() once. You’ll need to create a single list of results:

success: function( f ) {
    // Begin with your hard-coded choices
    var staticChoices = [
        {
            label: "All Companies",
            value: "All Companies",
            company_id: ""
        }
    ];

    // Parse downloaded choices
    var dynamicChoices = $.map( f, function( item ) {
        return {
            label: item.company_name + ' ('+item.company_id+') ' + item.generator_address,
            value: item.company_name,
            company_id: item.company_id
        }
    });

    // Combine the two :)
    response(staticChoices.concat(dynamicChoices));
}