Нужно настроить ввод jquery-токена - PullRequest
Новая
       20

Нужно настроить ввод jquery-токена

0 голосов
/ 23 февраля 2012

Я хочу использовать ввод токена jquery, но мне нужно, чтобы список токенов был отделен от предложений.

Поэтому, когда вы вводите слово, оно автоматически заполняется, но когда пользователь вводит , или вводит, предлагаемое слово перемещается из этого поля в неупорядоченный список рядом на странице.

Кроме того, в списке токенов (которого нет в поле ввода) все еще должен быть символ x, чтобы удалить его из представления формы.

Есть ли вилка, которая делает это?

1 Ответ

1 голос
/ 04 мая 2012

Вы можете использовать обратный вызов 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, которое должно содержать идентификаторы токенов.Вы должны добавить некоторую логику для управления строковым значением этого поля (сделать его запятым, лишние запятые при удалении токена и т. Д.)

...