在jquery自动完成中按类别搜索答案

【问题标题】：Search by category in jquery auto complete在jquery自动完成中按类别搜索
【发布时间】：2017-05-17 09:58:55
【问题描述】：

我正在使用类别明智的 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();
        }
    } 

  });

【问题讨论】：

听起来是个棘手的问题.. 到目前为止，您尝试了哪些没有奏效的方法？（我知道您不只是要求有人为您编写解决方案而不自己先尝试）
我认为您应该在服务器中执行此操作。客户端根本不关心过滤（在您的情况下）
@mike510a 我试过如果用户输入一些东西，如果它不匹配任何城市名称但匹配国家名称然后选择国家作为标签和城市作为类别。但这个解决方案没有按预期工作。
您也可以包含该代码吗？也许我们可以帮你解决它。
我更新了有问题的使用硬编码值进行测试

标签： javascript jquery autocomplete

【解决方案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 );
      };

【讨论】：