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

Question

我正在寻找使用 jquery 令牌输入，但我需要将令牌列表与建议分开。

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

此外，令牌列表（不在输入框中）仍然需要有 x 才能将其从表单提交中删除。

有没有这样的叉子？

Answer 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>

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