在jquery中完成按类别搜索

Question

我正在使用类别明智的jquery自动完成https://jqueryui.com/autocomplete/#categories来显示下拉列表。我将城市名称作为标签和国家名称作为类别传递。按标签名称搜索工作正常，但我想提供按国家/地区搜索的选项。如果用户键入国家/地区名称，则该国家/地区的所有城市都应显示在下拉列表中。

因此，如果用户键入澳大利亚，那么我需要找到所有类别澳大利亚的lebels并在下拉列表中显示它们

我附加了显示当前功能的图像

javascript代码

  $( "#loading" ).catcomplete
  ({

    source: function( request, response ) 
    {

        $.ajax({
              url: 'URL to fucntion',
              dataType: "json",
              data: {},
              async:true,
              success: function(data) {
                  var cat_data = $.map(data, function(item) { 
                      return {
                          label: item.label,
                          category: item.category,

                      };
                  });
                  $("#loading").catcomplete({
                      source: cat_data,
                      minlength:0,
                      delay: 0

                  });
              }
          });

          },

        response: function(event, ui) {
        if (!ui.content.length) {                                        

            $( "#loading" ).catcomplete({
              source: [{"label":"australia","category":"sydney"},{"label":"australia","category":"melbourne"}]
            });


        } else {
            $("#message").empty();
        }
    } 

  }); 

Answer 1

您好我使用以下代码

解决了这个问题

在json响应中使用value和desc而不是label和category

    $( "#loading" ).autocomplete({

        source: Json data here,
        focus: function( event, ui ) {
          $( "#loading" ).val( ui.item.label );
          return false;
        },
        select: function( event, ui ) {
          $( "#loading" ).val( ui.item.desc );
          $( "#loading-id" ).val( ui.item.value );
          $( "#loading-description" ).html( ui.item.desc );


          return false;
        }
      })
      .autocomplete( "instance" )._renderItem = function( ul, item ) { 
        return $( "<li>" )
          .append( "<div>"  + item.desc + "</div>" )
          .appendTo( ul );
      };