Autocomplete applying value not label to textbox

Question

Im having troubles trying to get the autocomplete to work properly.

It all looks ok to me but....

Answer 1

In my case, I need to record another field 'id' in an hidden input. So I add another field in the data returned from ajax call.

{label:"Name", value:"Value", id:"1"}

And have added a 'create new' link at the bottom of the list. On click the 'create new', a modal will pop up and you can create new item from there.

$('#vendorName').autocomplete
    (
        {
            source: "/Vendors/Search",
            minLength: 2,
            response: function (event, ui)
            {
                ui.content.push
                ({
                    label: 'Add a new Name',
                    value: 'Add a new Name'
                });
            },
            select: function (event, ui)
            {
                $('#vendorId').val(ui.item.id);
            },
            open: function (event, ui)
            {
                var createNewVendor = function () {
                    alert("Create new");
                }
                $(".ui-autocomplete").find("a").last().attr('data-toggle', 'modal').addClass('highLight');
                $(".ui-autocomplete").find("a").last().attr('href', '#modal-form').addClass('highLight');
            }
        }
    );

I think the point is that you can add any extra data field other than just 'label' and 'value'.

I use bootstrap modal and it can be as below: