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:

<div id="modal-form" class="modal fade" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body">
            <div class="row">

            </div>
        </div>
    </div>
</div>

Answer 2

The default behavior of the select event is to update the input with ui.item.value. This code runs after your event handler.

Simply return false or call event.preventDefault() to prevent this from occurring. I would also recommend doing something similar for the focus event to prevent ui.item.value from being placed in the input as the user hovers over choices:

$("#customer-search").autocomplete({
    /* snip */
    select: function(event, ui) {
        event.preventDefault();
        $("#customer-search").val(ui.item.label);
        $("#selected-customer").val(ui.item.label);
    },
    focus: function(event, ui) {
        event.preventDefault();
        $("#customer-search").val(ui.item.label);
    }
});

Example: http://jsfiddle.net/andrewwhitaker/LCv8L/

Answer 3

Just would like to add that instead of referencing input element by "id" inside select and focus callback functions you can use this selector, like:

$(this).val(ui.item.label);

it's useful when you assign autocomplete for multiple elements, i.e. by class:

$(".className").autocomplete({
...
    focus: function(event, ui) {
        event.preventDefault();
        $(this).val(ui.item.label);
    }
});