автозавершения (jquery.auto-complete.js) категории с метаданными этикетки

Question

Я в состоянии сделать основные метки и категории с помощью

http://jqueryui.com/autocomplete/#categories

но моя потребность без использования

$ .widget ("custom.catcomplete", $ .ui.autocomplete, {});

, как я могу это сделать с помощью

JQuery (".class") .autoComplete ({});

https://goodies.pixabay.com/jquery/auto-complete/demo.html

Однако, мне было интересно, если его можно прикрепить некоторые метаданные с меткой. Например ...

"[{ label: \"labelname1\", category: \"cat1\" },{ label: \"labelname2\", category: \"cat1\" }, 
    { label: \"labelname3\", category: \"cat2\" },{ label: \"labelname4\", category: \"cat2\" }, 
    { label: \"labelname5\", category: \"cat2\" }, 
    ];" 

Я хочу что-то вроде:

cat1

-labelname1

-labelname2

CAT2

-labelname3

-labelname4

-labelname5

Примечание: использовать только JQuery (".class") .autoComplete ({});

исх:>https://goodies.pixabay.com/jquery/auto-complete/demo.html

Answer 1

Я предполагаю, что это вы ищете:

jQuery(document).ready(function($) { 


    $(".class").autocomplete({ 
    source: [ { label: "labelname1", category: "cat1" }, { label: "labelname2", category: "cat2" }, { label: "labelname3", category: "cat3" } ], 
    select: function(event, ui) { 
      $(".class").val(ui.item.label); 

      return false; 
     } 
}) 
.data("ui-autocomplete")._renderItem = function(ul, item) { 
       return $("<li>") 
       .data("ui-autocomplete-item", item) 
       .append("<a>" + item.category + "<br>" + item.label + "</a>") 
       .appendTo(ul); 
      }; 

}); 

Я надеюсь, что это помогает