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....

<script>
$(function () {
    $("#customer-search").autocomplete({
        source: 'Customer/GetCustomerByName',
        minLength: 3,
        select: function (event, ui) {
            $("#customer-search").val(ui.item.label);
            $("#selected-customer").val(ui.item.label);
        }
    });
});
</script>
<div>
<input id="customer-search" />
 </div>
@Html.Hidden("selected-customer")

However when I select an item from the dropdown the value is been applied to the textbox instead of the label.

What have I done wrong?

If I look at the source using firebug I can see that my hidden field is being updated correctly.

Philistine

What do you see in the JSON response in Firebug? – Hogwash

[{"label":"Tom Smith","value":"1234"},{"label":"Tommy Smith","value":"12321"}] – Philistine

See that: #6716766 – Gargle

Answer 1

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/

Internuncial

Very useful! Didn't you mean $("#selected-customer").val(ui.item.value); – Otte

@juanignaciosl: No--that code is meant to update the search box with the label instead of the value. – Internuncial

I am storing value at db not label, So next time I want to set according lable on basis of value. What is the way of doing so? – Fattish

Hey, trying to do something similar but put everything in focus instead of select. Problem is item.value is being set instead of item.label. Anyway to circumvent this? lookup.autocomplete({ source: data, focus: function(event, ui) { event.preventDefault(); $(this).val(ui.item.label) status.text(ui.item.value) submitted.text(ui.item.submitted) comments.html(ui.item.comments) } }) – Tigerish

Same here, I want label displayed, value POSTed. I did manage to patch together a kludge involving a hidden element (similar to @Yang Zhang's answer below, but at this point it's looking like rolling my own autocomplete will be the least inelegant approach. – Smoothtongued

Answer 2

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);
    }
});

Kershaw

Answer 3

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>

Doubleton