带有标签元数据的 jquery 自动完成类别

Question

我可以使用 http://jqueryui.com/autocomplete/#categories 做基本的标签和分类

但是，我想知道是否可以附加一些带标签的元数据。例如。现在我有

Product
  TV
  DVD
People
  James
  ROY

我想要这样的东西

Product
  TV - Electronics
  DVD - Electronics
People
  James - USA
  ROY - UK

当用户在所选元素标签上按回车键时，我只想在输入框中输入标签文本，不希望将元数据作为输入文本的一部分。这意味着我不希望 Electronics 作为输入文本的一部分。

请帮忙。

Answer 1

将元数据添加到标签，将文本添加到要在文本框中显示的 idx 字段，然后处理选择事件以在输入字段中显示 idx 文本 ike:

代码:

 $(function() {
var data = [
    { label: "TV - Electronics",idx:"TV", category: "Products" },
{ label: "DVD - Electronics",idx:"DVD", category: "Products" },
{ label: "James - USA",idx:"James", category: "People" },
{ label: "Roy - UK",idx:"Roy", category: "People" }
];
$( "#search" ).catcomplete({
delay: 0,
source: data,
    select: function(event, ui) { 
    event.preventDefault();
  var selectedObj = ui.item.idx;
  $("#search").val(selectedObj);  
}
});
});

DEMO FIDDLE