需要定制jQuery的令牌输入

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> 

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