jQuery UI autocomplete select event not working

Question

I'm having quite a bit of trouble getting select or the focus functions to respond. I can't even kill the results in the select once I expand the results. I read a lot about certain versions of jQuery UI conflicting with the main jQuery library but pretty much any combination doesn't seem to work. Worse, it's not throwing any errors in console. Everything below select/focus seem to work fine. I am appending some HTML to each item and in my application I am styling them different based on a class. I would like to use select to append some extra HTML using ui.item.label below the input itself (like a tagging system). I am just using the alert to troubleshoot in the meantime.

Here is a fiddle that has my half-working code.

http://jsfiddle.net/c3UM5/

$(function () {

var availableItems = [{
    value: "recent",
    label: "Recent",
    classN: "heading"
}, {
    value: "all",
    label: "All",
    classN: "all"
}, {
    value: "lorem",
    label: "Lorem",
    classN: "lorem"
}, ];

$(".post-to").autocomplete({
    source: availableItems,
    minLength: 0,
    focus: function (event, ui) {
        $('.post-to').val(ui.item.label);
        alert(ui.item.label);
        return false;
    },
    select: function (event, ui) {
        alert(ui.item.label);
        return false;
    }
}).on("focus", function () {
    $(this).autocomplete("search", '');
}).data("ui-autocomplete")._renderItem = function (ul, item) {
    return $("<li></li>")
        .data("item.autocomplete", item)
        .append("<span class='" + item.classN + "'></span><span>" + item.label + "</span>")
        .appendTo(ul);
  };

});

SirDerpington · Accepted Answer · 2013-05-07 18:18:06Z

4

I think you just have some minor issue (with quite huge consequences)

In your _renderItem function which you overwrite you try to append the elements with <span> tags but you need to define them as <a> tags.

See my updated jsfiddle of your code.

I just changed this:

$(".post-to").autocomplete()
    .data("ui-autocomplete")._renderItem = function (ul, item) {
        return $("<li></li>")
            .data("item.autocomplete", item)
            //instead of <span> use <a>
            .append("<a class='" + item.classN + "'></a><a>" + item.label + "</a>")
            .appendTo(ul);
};

Alerts work fine now!

I guess this "limitation" is made due to style the appended elements properly. If you look at the styles that get applied they are defined for <a>tags. Like

.ui-menu .ui-menu-item a
.ui-widget-content a

edited May 7, 2013 at 18:18

answered May 7, 2013 at 18:12

SirDerpington

11.5k4 gold badges52 silver badges55 bronze badges

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

1 Comment

Matthew K. Turner Over a year ago

Yup! That's pretty bizarre. Such a small issue but now the rendered HTML is completely different. That did it.

Collectives™ on Stack Overflow

jQuery UI autocomplete select event not working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related