jquery - 如何在自动完成中找到所选元素的类别？

Question

我需要对自动完成结果进行分组，我发现了以下 solution 。如何找出所选建议的类别？

例如，假设有城市和国家/地区类别，并且用户选择其中一个城市。我如何知道所选项目是城市类别而不是国家/地区类别的一部分(提交表单时)？我也不希望用户看到类别名称。

到目前为止我发现了什么

$.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 );
            });
        }
    });

我的代码

$(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");
            }
        },
    })

更新

我还发现了这个code但无法弄清楚类别。

Answer 1

您需要在源中获得的响应中包含该类别。建议的项目可以具有比 value 和 label 更多的属性。在您的示例中，他们使用类别。 如果您提供的数据格式良好，那么它只是项目的一个属性，您可以使用 上的简单 ui.item.category 访问该项目。选择 事件。

像这样:

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