如何在AutoComplete中找出所选元素的类别？ [英] How to find out the category of selected element in AutoComplete?

问题描述

我需要对自动完成结果进行分组，我发现以下解决方案。如何确定所选建议的类别？

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

我的代码

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

更新

我也发现了这个代码但无法确定类别。

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

推荐答案

您需要在<$ c $中包含该类别c>回复你进入来源。建议的项目可以具有比值和标签更多的属性。在您的示例中，他们使用类别。
如果您提供的数据格式正确，它只是属性您可以使用简单的 ui访问的项目.item.category 在上选择事件。

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.

喜欢这样：

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

这篇关于如何在AutoComplete中找出所选元素的类别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！