Jquery autocomplete by categories not returning selected result

0
votes

I'm trying to get the resulting listbox value from the autocomplete with categories example, and I can't get it to work like the other examples. I must be doing something stupid.

    
    $.widget( "custom.catcomplete", $.ui.autocomplete, {
        _renderMenu: function( ul, items ) {
            var self = this,
                currentCategory = "";
            $.each( items, function( index, item ) {
                if ( item.category != currentCategory ) {
                    ul.append( "" + item.category + "" );
                    currentCategory = item.category;
                }
                self._renderItem( ul, item );
            });
        },
                /* I ADDED THIS */
        select: function(event, ui){

                    alert(ui.item.value);
                }
    });
    
    
    $(function() {
        var data = [
            { label: "anders", category: "" },
            { label: "andreas", category: "" },
            { label: "antal", category: "" },
            { label: "annhhx10", category: "Products" },
            { label: "annk K12", category: "Products" },
            { label: "annttop C13", category: "Products" },
            { label: "anders andersson", category: "People" },
            { label: "andreas andersson", category: "People" },
            { label: "andreas johnson", category: "People" }
        ];

    $( "#search" ).catcomplete({
        delay: 0,
        source: data
    });
});
</script>

1
jquery-uiautocomplete
When you say doesn't work, does it even fire the autocomplete code? have you made breakpoints/checked in firebug if theres any errors? - BenW
No errors. The dropdown works as it should, but when I select an item I don't get the alert. Other examples of autocomplete that have this code work. So I've either got it in the wrong spot or something else. I've monkeyed with it a lot and can't get it. - Bth
I figured it out. I needed to put it here: $("#search").catcomplete({ delay: 0, source: data, select: function(event, ui){ alert(ui.item.label); } }); - Bth

1 Answers

0
votes

I figured it out. I needed to put it here:

$("#search").catcomplete({
    delay: 0,
    source: data,
    select: function(event, ui){
    alert(ui.item.label);
    }
});