jQuery autocomplete not limiting results to search value in input control

Question

I have tried to get search to only return results that match what the user enters into the search box but my solution returns ALL results ALL the time. Which isn't really all that useful. My JSON has an id and name so it looks something like this:

[{"id":"48de475e-cbf2-4264-a482-02cbe9dbcbfb","name":"sample.user@someTopLevelDomain.com for Username: sampleuser"}]

The Javascript/jQuery below is a simple ajax call to my controller which returns a JsonResult via HTTP GET. I map the returned data and display it in the autocomplete control. I am not sure why the search functionality won't return the subset of data.

function getEmailAddresses() {

        function log(message) {
            $("<div>").text(message).prependTo("#log");
            $("#log").scrollTop(0);
        }

        function split(val) {
            return val.split(/,\s*/);
        }
        function extractLast(term) {
            return split(term).pop();
        }

        $('#autocompleteEmailAddresses')
            .bind("keydown", function(event) {
                if (event.keyCode === $.ui.keyCode.TAB) {
                    event.preventDefault();
                }
            })
            .autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "/Home/GetEmailAddresses",
                    type: "GET",
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    async: true,
                    data: {
                        featureClass: "P",
                        style: "full",
                        maxRows: 12,
                        name_startsWith: request.term
                    },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return {
                                label: item.name,
                                value: item.id
                            }
                        }));
                    }
                });
            },
            search: function() {
                // custom minLength
                var term = extractLast( this.value );
                if ( term.length < 2 ) {
                    return false;
                }
            },
            focus: function() {
                // prevent value inserted on focus
                return false;
            },
            select: function (event, ui) {
                log(ui.item ?
                "Selected id: " + ui.item.value :
                "Nothing selected, input was " + this.value);

                var terms = split( this.value );
                // remove the current input
                terms.pop();
                // add the selected item
                terms.push( ui.item.value );
                // add placeholder to get the comma-and-space at the end
                terms.push( "" );
                this.value = terms.join( ", " );
                return false;
            },
            minLength: 2,
            open: function() {
                $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
            },
            close: function() {
                $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
            }
        });
    };

Here is my markup

<div>
  <input type="text" id="autocompleteEmailAddresses" class="form-control item" placeholder="Enter an Email address" /> 
</div>

<div style="margin-top:2em; font-family:Arial"> 
  <div id="log" style="overflow: auto;"></div>
</div>

Answer 1

Change your .autocomplete to the following...

.autocomplete({
     source: function (request, response) {
             $.ajax({
                url: "/Home/GetEmailAddresses?term=" + extractLast(request.term),
                type: "GET",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                async: true,
                       data: {
                            featureClass: "P",
                            style: "full",
                            maxRows: 12,
                            name_startsWith: request.term
                        },