在jQuery中按類別搜索自動完成

Question

我正在使用類別明智的jquery自動完成https://jqueryui.com/autocomplete/#categories在下拉列表中顯示列表。 我將城市名稱作為標簽，將國家名稱作為類別。 按標簽名稱搜索效果很好，但我想提供按國家搜索的選項。 如果用戶鍵入國家/地區名稱，則該國家/地區的所有城市都應顯示在下拉列表中。

因此，如果用戶輸入澳大利亞，那么我需要找到所有具有澳大利亞類別的lebel，並將其顯示在下拉列表中

我已附上顯示當前功能的圖像

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