0

jquery トークン入力を使用しようとしていますが、提案とは別にトークン リストが必要です。

したがって、単語を入力するとオートコンプリートされますが、ユーザーが,入力または入力すると、提案された単語がそのボックスからページの近くの順序付けられていないリストに移動します。

また、トークン リスト (入力ボックスにはありません) には、フォーム送信から削除するための x が必要です。

これを行うフォークはありますか？

4

1 に答える 1

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 を含む値を使用します。そのフィールドの文字列値を操作するロジックを追加する必要があります (コンマ区切りにする、トークンの削除時に余分なコンマを削除するなど)。

于 2012-05-03T20:03:36.043 に答える