自动完成类别排序

Question

我正在根据文档中的类别示例实施 jQuery UI 自动完成我需要在 Jquery 中通过自动完成对结果进行排序（按字母顺序排列），首先在类别（酒店和城市）中，然后在 Itens（名称）中。示例：

城市

迈阿密
奥兰多

酒店

酒店A
B酒店

如果能帮助我走上正确的道路，我们将不胜感激。

$( function() {
    $.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 );
          }
        });
      }
    });
    var data = function (request, response) {
            $.ajax({
                type : 'GET',
                url: "http://commons.t4w.com.br/new/api/v1/mapping/autocomplete/all/"+ request.term +"/managerid/223/token/0b0f00da-30ec-4210-aca4-92aa6ea9470a",
                success: function (data) {
                    response($.map(data, function (item) {
                        if (item.type == "City" || item.type == "Hotel") {
                            var label = item.name["pt-BR"];
                            return {
                                label: label,
                                destinationId: item.destinationId,
                                category: item.type
                            }
                        }
                  }));
                }
              })
      };

    $( "#search" ).catcomplete({
        delay: 0,
        source: data,
        minLength: 3
    });
  } );

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
City:
<input id="search">

Answer 1

您可以只使用一个函数作为 autocomplete source and then use $.get(), .filter() and .sort() 来制作您的自动完成回调。

其他有用的读物：template literals and spread operator。

let language = 'en'; //I assume you have a language selection somewhere

$( "#search" ).autocomplete({
  delay: 0,
  minLength: 3,
  select: function(e, ui) {
    //ui.item.data contains the object returned in the source callback
    //see beleow
    if (ui.item.data){
      //code to do stuff with the selection
    }
  },
  source: function (request, callback) {
    $.get(`http://commons.t4w.com.br/new/api/v1/mapping/autocomplete/all/${request.term}/managerid/223/token/0b0f00da-30ec-4210-aca4-92aa6ea9470a`)
      .done(function(suggestions) {
        if (suggestions) {
          //the data property set in the map function will be available in the select event
          //see above
          callback([
            { label: 'CITIES' }, //this is just a placeholder, it won't have a data property when selected
            ...suggestions
              .filter(item => item.type === 'City')
              .sort((a, b) => a.name[language].localeCompare(b.name[language]))
              .map(function (city) {
                return { label: city.name[language], data: city };
              }),
            { label: 'HOTELS' },
            ...suggestions
              .filter(item => item.type === 'Hotel')
              .sort((a, b) => a.name[language].localeCompare(b.name[language]))
              .map(function(hotel) {
                return { label: hotel.name[language], data: hotel };
              })
          ]);
        }
      })
      .fail(function(error) {
         //code to handle errors
      });
     }
  });

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
City:
<input id="search">

Answer 2

感谢您的回复，它工作正常。在这个模板中，我可以格式化类别名称和项目吗？

自动完成类别排序

Autocomplete with Categories sorted

javascript

jquery

jquery-ui-autocomplete