预填充 jquery 令牌输入文本框

Posted 2023-05-09

【中文标题】预填充 jquery 令牌输入文本框

【英文标题】：Prepopulate jquery token input textbox

【发布时间】：2013-08-14 20:04:53

【问题描述】：

在页面加载时我有一个令牌输入，即，

  $('.txtWard').tokenInput(ward, 
                                        theme: 'facebook',
                                        allowCustomEntry: true,
                                        preventDuplicates: true,
                                        tokenDelimiter: '*',
                                        searchingText: 'Searching...'
                                    );

但问题是，当我单击另一个按钮时，我想将项目预填充到此令牌输入文本框。当我使用以下代码时，文本框复制为另一个文本框。

  $(document).ready(function () 
            $('.txtWard').tokenInput(ward, 
                theme: 'facebook',
                allowCustomEntry: true,
                preventDuplicates: true,
                tokenDelimiter: '*',
                searchingText: 'Searching...'
            );
            $('#btnGet').click(function () 
                var prepopulateWards = new Array();
                $.ajax(
                    type: "POST",
                    url: "FetchWard",
                    data: JSON.stringify( patientNo: $('#txtPatientNo').val(), locale: 'en-US' ),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (result) 
                        for (var j = 0; j < result.wards.length; j++) 
                            prepopulateWards.push( id: result.wards[j].Code, name: result.wards[j].ward );
                        
                    
                );
                $('.txtWard').tokenInput(ward, 
                    theme: 'facebook',
                    allowCustomEntry: true,
                    preventDuplicates: true,
                    tokenDelimiter: '*',
                    searchingText: 'Searching...',
                    prePopulateFromValue: true,
                    prePopulate: prepopulateWards
                );
            );

        );

【问题讨论】：

您能发布您在prepopulateWards 变量中存储的内容，以便我们提出建议吗？但是，是的，我认为您并不是要创建两次 tokenInput。

@Chris 请检查已编辑的问题

如果 Lee 下面的解决方案不正确，那么我认为您误解了 prePopulate 的使用方式。添加病房时，您在寻找什么活动？您希望它们在文本框中显示为标记，还是只想将它们添加到可搜索项目列表中？ PrePopulate 适用于您在首次加载 TokenInput 时想要放置的令牌，否则就像 Lee 所说的“添加”，似乎是您所追求的解决方案。

【参考方案1】：

您真的应该阅读文档。我以前从未见过这个插件，但设法在几秒钟内弄清楚如何在输入中添加令牌。

不要尝试在同一个文本框上两次实例化插件，而是使用提供的方法将令牌添加到输入框。

http://loopj.com/jquery-tokeninput/

Methods

selector.tokenInput("add", id: x, name: y);
Add a new token to the tokeninput with id x and name y.

所以你的按钮的点击处理程序（或提交，如果它是一个表单提交按钮），应该是这样的：

$('.txtWard').tokenInput('add',ward);

假设 ward 是所需格式的有效对象，我当然会假设您的代码的作用。但这大致就是您需要做的。

【讨论】：

感谢您的回复，但我不想将项目“添加”到令牌输入，但我需要在另一个事件的令牌输入文本框中预先填充 (prePopulate: prepopulateWards) 已经存在的项目

所以去掉第一个tokenInput初始化器，点击按钮时初始化tokenInput？

【参考方案2】：

$(document).ready(function() 
            $("#demo-input-pre-populated").tokenInput("http://shell.loopj.com/tokeninput/tvshows.php", 
                prePopulate: [
                    id: 123, name: "Slurms MacKenzie",
                    id: 555, name: "Bob Hoskins",
                    id: 9000, name: "Kriss Akabusi"
                ]
            );
        );

http://loopj.com/jquery-tokeninput/demo.html#pre-populated

【参考方案3】：

If we are getting data from db with comma separated then
var prepopulateWards = new Array();

   var mail = response.d.Data.split(',');
   $(mail).each(function (index, item) 
       prepopulateWards.push( name: item );
   );



$('#txt_Recipients').tokenInput(
   
     //theme: "facebook",
     preventDuplicates: true,
     prePopulateFromValue: true,
     prePopulate: prepopulateWards
            );


);