How to find out the category of selected element in AutoComplete?

Question

I need to group AutoComplete results and I've found following solution. How can I figure out the category of selected suggestion?

For example, lets say there are City and Country categories and user selects one of the cities. How am I supposed to know the selected item is part of city and not country category (When the form gets submitted)? I also do not want the category names be visible to users.

What I have found so far

$.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 Code

$(function() {
    $("#box1").autocomplete({
        source: function(e, r) {
            var t, s = "http://localhost:8080/MyProject/autoComplete/box1";
            $.ajax({
                url: s,
                dataType: "json",
                data: {
                    q: e.term
                },
                success: function(e) {
                    r(e)
                }
            })

        },
        select: function(event, ui) {
            if (ui.item) {
                alert("box one is seleted");
            }
        },

    }), $("#box2").autocomplete({
        source: function(e, r) {
            $.ajax({
                url: "http://localhost:8080/MyProject/autoComplete/box2",
                dataType: "json",
                data: {
                    q: e.term
                },
                success: function(e) {
                    r(e)
                }
            })
        },
        select: function(event, ui) {
            if (ui.item) {
                alert("box two is selected");
            }
        },
    })

Update

I've also found this code but could not figure out the category.

Answer 1

You need to include the category in the response you're getting in the source. The items that are proposed can have more properties than value and label. In the examples you have, they use category. If the data you provide is well formed, it'll simply be a property of the items that you can access using a simple ui.item.category on the select event.

Like this:

$.widget("custom.catcomplete", $.ui.autocomplete, {
  _create: function() {
    this._super();
    this.widget().menu("option", "items", "> :not(.ui-autocomplete-category)");
  },
  _renderMenu: function(ul, items) {
    var that = this,
      currentCategory = "";
    $.each(items, function(index, item) {
      var li;
      if (item.category != currentCategory) {
        ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
        currentCategory = item.category;
      }
      li = that._renderItemData(ul, item);
      if (item.category) {
        li.attr("aria-label", item.category + " : " + item.label);
      }
    });
  }
});


$("#search").catcomplete({//make sure you call your custom autocomplete
  delay: 0,
  source: function(request, callback) {
    callback(data); //here you must make sure the response you're getting has category.
  },
  select: function(e, ui) {
    // if the cateogry is in your response, on select, your item will have a category property.
    alert('Item category: ' + ui.item.category)
  }
});


// Modify your response so you have something similar to this.
var data = [{
  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"
}];

.ui-autocomplete-category {
  font-weight: bold;
  padding: .2em .4em;
  margin: .8em 0 .2em;
  line-height: 1.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<label for="search">Search:</label>
<input id="search">