需要自定义jquery-token-input答案

【问题标题】：Need to customise jquery-token-input需要自定义jquery-token-input
【发布时间】：2012-02-23 11:18:00
【问题描述】：

我希望使用 jquery 令牌输入，但我需要将令牌列表与建议分开。

因此，当您输入单词时，它会自动完成，但是当用户键入 , 或输入时，建议的单词将从该框移动到页面附近的无序列表。

另外令牌列表（不在输入框内）还需要有x才能从表单提交中删除。

有没有这样的叉子？

【问题讨论】：

标签： jquery tags token jquery-tokeninput

【解决方案1】：

您可以使用 onAdd 回调将令牌添加到 <ul> 元素并从建议框中删除令牌。基本上是这样的：

<input type="text" id="token_field" name="token_field" />
<input type="hidden" id="hidden_token_ids" name="hidden_token_ids" />
<ul id="token_display_list"></ul>

<script language="javascript">
  $('#token_field').tokenInput('tokenpath.json', {
    prePopulate: $('#token_field').data('pre'),

    // Called every time a token is added to the field
    onAdd: function(item) {
      // Add the item to the external element contents with a link to remove it
      $('#token_display_list').append('<li id="token_' + item.id + '">' + item.name + '<a href="#" onClick="remove_item_from_list(' + item.id + ');">x</a></li>');

      // Add the item id to a hidden field which will actually store the values
      // Probably need to add control statements here to ensure no duplication, etc.
      $('#hidden_token_ids').val($('#hidden_token_ids').val() + item.id);

      // Remove the just-added token from the input field
      $('#token_field').tokenInput("remove", item);
    }
  });

  var remove_item_from_list = function(id) {
    // Remove the token from the cache stored inside tokenInput (only enable if onAdd is not successfully removing the token immediately)
    // $('#token_field').tokenInput("remove", {id : id});

    // Remove the id from the hidden list (add control statements here as well)
    $('#hidden_token_ids').val($('#hidden_token_ids').val().replace(id, ''));

    // Remove the li element from the visible list
    $('#token_display_list').remove('#token_' + id);

    return false;
  }
</script>

然后在接收页面上，只需使用应包含令牌 ID 的 #hidden_token_ids 的值。您应该添加一些逻辑来操作该字段的字符串值（使其以逗号分隔，去除标记时去除多余的逗号等）

【讨论】：