Question

我可以使用http://jqueryui.com/autocomplete/#categories

执行基本标签和类别

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

Product
  TV
  DVD
People
  James
  ROY

我想要像

这样的东西

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

当用户点击进入所选项目标签时，我只想在输入框中输入标签文字，我不希望元数据作为输入文本的一部分。这意味着我不希望电子产品成为输入文本的一部分。

请帮忙。

Answer 1

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

<强> CODE：

 $(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

Answer 2

正如@Unknown所说，您可以在label数据集中返回自动填充标准（value，items）以外的其他属性。

我有UI，我提供“创建新”作为选项，如果用户是公认的名称，以及提供现有实体。这使用额外的PK /或Create属性，该属性存储在选择的隐藏输入中。

对于自定义渲染，您可以区分“精心渲染”（显示的）值和后端键或值（内部使用）。取决于你想要如何实现你的UI，但是一个选项是Javascript中的“字典”/“关联数组”方法来查看值。

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

2 个答案: