jQueryUI autocomplete displays value instead of label in the target input field

Question

I am feeding a jQuery UI autocomplete off of a local array like so:

var articleCategories = [
{
    label: "Technical",
    value: 1
}, 
...
];

I'd like the control to be able to display only the labels in the suggestion box, which it does, and also only to display the label of the selected item in the target input field, which in my case is a textbox with the id as txtCategory.

function displaySelectedCategoryLabel(event, ui) {
    $("#txtCategory").val(ui.item.label);
    $("#hidSelectedCategoryId").val(ui.item.value);
};

var autoComplete = $("#txtCategory").autocomplete({
    source: articleCategories,
    classes: ...,
    position: ...,
    focus: function (event, ui) {
        $("#txtCategory").val(ui.item.label);
    }, 
    select: function (event, ui) {
        displaySelectedCategoryLabel(event, ui);
    }, 
    change: function (event, ui) {
        displaySelectedCategoryLabel(event, ui);
    }
});

So, I provided overrides for all the three, the focus, select and change events. When I step through in the debugger, I see them all behave just as I expect, except for one small aberration, as described below.

Here is what happens:

When I change focus by hovering my mouse over the items in the suggestion box, the focus event works just fine, displaying the labels in the target input field.
However, if I navigate the items in the suggestion box using my keyboard keys, once again, only the values appear in the target input field. Do I need to overide the keypress, keyup and keydown events also? But of which control, since the suggestion box is dynamically created.
When I select an entry from the suggestion box, the target input field displays the label obeying my handler, but only briefly, like described above. It soon changes back to displaying the value for as long as I stay inside the target control.
And as expected, as soon as I remove focus from the target control to outside, the change event occurs and the target input field starts displaying the label as per my handler.

What's going on? Am I missing an event handler?

Demo

Here is a working demo that illustrates the problem. Please download the entire folder named TestJQueryUIAutoComplete as it has the jQueryUI javascript files and the CSS files. In case you already have these CSS and JS files, then you only need to download the TestJQueryUIAutoComplete.html file.

can you please create a demo?

brk
– brk

2018-08-27 06:06:11 +00:00
Commented Aug 27, 2018 at 6:06 — brk
– brk, Commented Aug 27, 2018 at 6:06
Sure. Just doing that.

Water Cooler v2
– Water Cooler v2

2018-08-27 06:10:33 +00:00
Commented Aug 27, 2018 at 6:10 — Water Cooler v2
– Water Cooler v2, Commented Aug 27, 2018 at 6:10
@brk I just included a demo.

Water Cooler v2
– Water Cooler v2

2018-08-27 06:20:04 +00:00
Commented Aug 27, 2018 at 6:20 — Water Cooler v2
– Water Cooler v2, Commented Aug 27, 2018 at 6:20

devtech · Accepted Answer · 2018-08-27 08:16:32Z

3

Looks like focus is triggered twice, in its overridden and default version, that puts the value in the autocomplete box.

Adding a preventDefault() on focus and displaySelectedCategoryLabel seems to solve the problem, while I'm still investigating about why it behaves like this.

<html>
<head>
    <link rel = "stylehseet" type = "text/css" href = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.css"  />
    <link rel = "stylehseet" type = "text/css" href = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.structure.css"  />
    <link rel = "stylehseet" type = "text/css" href = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.theme.css"  />
    <style>
        #txtCategory {
            width: 400px;
            height: 50px;
            border: 2px solid red;
            padding-left: 20px;
            font-size: 20px;
        }

        .myCustomClass {
            font-size: 40px;
            font-family: "Georgia";
            list-style-type: none;
            background-color: blue;
            color: white;
        }
    </style>
<meta charset="utf-8"
</head>

<body>
    <input id = "txtCategory" />
    <input id = "hidSelectedCategoryId" type = "hidden" />

    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
    <script>
        $(function() {

            var articleCategories = [
            {
                label: "Technical",
                value: 1
            },
            {
                label: "Non-Technical",
                value: 2
            },
            {
                label: "External Publications",
                value: 3
            },
            {
                label: "Books",
                value: 4
            },
            {
                label: "Movies",
                value: 5
            }
        ];
        function displaySelectedCategoryLabel(event, ui) {
            $("#txtCategory").val(ui.item.label);
            $("#hidSelectedCategoryId").val(ui.item.value);
            event.preventDefault();
        };
        var autoComplete = $("#txtCategory").autocomplete({
            source: articleCategories,
            classes: {
                "ui-autocomplete": "myCustomClass"
            },
            position: {
                my: "left top",
                at: "left bottom",
                of: "#txtCategory",
                collision: "fit"
            },
            focus: function (event, ui) {
                $("#txtCategory").val(ui.item.label);
                event.preventDefault();
            },
            select: function (event, ui) {
                displaySelectedCategoryLabel(event, ui);
            },
            change: function (event, ui) {
                displaySelectedCategoryLabel(event, ui);
            }
        });
    });
    </script>
</body>

edited Aug 27, 2018 at 8:16

answered Aug 27, 2018 at 8:05

devtech

3741 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Water Cooler v2 Over a year ago

Did you find that out by stepping through the jQuery UI source?

devtech Over a year ago

no, I've already seen such double triggering problems and so I just tried. Usually those problems come from triggering an event from different nested elements at the same time, but this does'nt seem to be the case. Anyway it most certainly should'nt be like this, so reading the UI source would be a good thing to pinpoint the problem exactly, given having enough time to do so.. :P

Water Cooler v2 Over a year ago

Thanks very much. :-)

Collectives™ on Stack Overflow

jQueryUI autocomplete displays value instead of label in the target input field

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related