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.

[{"label":"Tom Smith","value":"1234"},{"label":"Tommy Smith","value":"12321"}] — Diver Dan, Oct 04 '11 at 03:15
See that: http://stackoverflow.com/questions/6716266/jquery-autocomplete-categories-select-label-and-value — , Mar 08 '12 at 00:34

score 218 · Accepted Answer · answered Oct 04 '11 at 03:22

218

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/

answered Oct 04 '11 at 03:22

Andrew Whitaker

119,029
30
276
297

1

Very useful! Didn't you mean `$("#selected-customer").val(ui.item.value);` – juanignaciosl May 30 '13 at 08:28
1

@juanignaciosl: No--that code is meant to update the search box with the `label` instead of the `value`. – Andrew Whitaker May 30 '13 at 12:28
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? – parth.hirpara Feb 27 '16 at 05:37
1

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) } })` – Batman Jul 20 '16 at 16:09
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. – Lori Feb 12 '17 at 20:17

score 17 · Answer 2 · answered Mar 20 '14 at 15:32

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

score 8 · Answer 3 · answered Jun 15 '15 at 11:56

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>

Autocomplete applying value not label to textbox

3 Answers3

Linked