jQueryUI Categories Pass Category Info

Question

In summary: The category of all items added needs to be saved along with the name of an item. This then allows for this category info to be transmitted on submit so that the correct query is used (relating to the correct table). Ideas?

What I need to do is that when a user selects what they're searching for (from the autocomplete drop down), the category information (aka the name of it's category), is also recorded somewhere.

The idea is that when the user presses search, the phrase they're looking for as well as the category name is also sent. Reasoning: You've got 3 tables, one containing information on cars, one on animals and one on aliens. You wouldn't need to query all 3 if the table it relates to is already determined (from the category information).

The issue with searching all 3 is that you might have an alien named Sponge Bob, as well as an animal etc.

Here's the code we're dealing with (from the jQueryUI website):

$.widget( "custom.catcomplete", $.ui.autocomplete, {
    _renderMenu: function( ul, items ) {
        var self = this,
            currentCategory = "";
        $.each( items, function( index, item ) {
            if ( item.category != currentCategory ) {
                ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
                currentCategory = item.category;
            }
            self._renderItem( ul, item );
        });
    }
});

My thinking is that within the category complete function, under the select event:

$(function() {
        $( "#search" ).catcomplete({
            delay:0,
            source: "query/encode-json.php?term="+ $("#search").val(),
            select: function(event, ui){

            }
        });     
    });

the category that is associated with the selected item, can be sent/stored somewhere. The issue I'm having is that I can get this information in the widget function (item.category) but this information is not available (directly) in the select event. This makes sense as the widget only populates the list, it doesn't deal with the select event (I'm thinking), but somehow I need to be able to access this information. My thoughts have been to find the index and work backwards from there but that doesn't seem to work. The other option (more basic) is that each time the widget is looped through, the category name is added to the title field of the li element.

I've been trying for hours and not getting anywhere with either solution.

Thanks for any light you may be able to shed :)

score 0 · Accepted Answer · edited May 23 '17 at 11:56

Figured out a way to do it. This is the code I ended up with:

$(".ui-menu-item").live('click', function(e) {
        cat = $(this).prevAll(".ui-autocomplete-category:first").text();
    });

At first I had issues with the click side of it as I didn't realise I needed the live side of it etc. So was trying this:

$(".ui-menu-item").click(function () {

    });

So, what it does is that when one of the search results is selected (clicked), the text of the category above is taken and assigned to the cat variable. This variable I already set to transmit to the search page that redoes the search:

 function test(){
                        var i = document.createElement('input');
                        i.type = 'hidden';
                        i.name = 'cat';
                        i.value = cat;
                        document.getElementById("searchForm").appendChild(i);
                    }

Source: jquery find closest previous sibling with class

jQueryUI Categories Pass Category Info

1 Answers1