2

我正在使用与 select2 插件绑定的输入框滚动我自己的 typeahead 实现。用户将输入手动电子邮件地址，然后使用 onchange 事件针对电子邮件正则表达式进行验证，或者他们可以开始输入已绑定到其帐户的收件人的 DisplayName。该列表将通过对控制器的 ajax 调用获取，然后控制器调用服务并检索数据，然后通过动态创建的列表项。如果用户单击或点击显示的其中一个 DisplayName，则该收件人将被添加到所选收件人的列表中，并从那时起显示在 select2 中。

typeahead 和 ajax 调用工作正常，数据返回并正确显示；但是，我似乎无法将从初始 ajax 调用返回的对象作为参数传递给函数。如果我尝试传递原始值，我的'unexpected identifier'控制台调试器中会出现错误；如果我尝试传递JSON.stringify(value)，我'unexpected token ;.' 总是可以通过传递接收者的 ID 属性来回退（这工作正常，当我尝试传递我遇到困难的复杂对象时）并再次重建对象，但是它显然最好避免这种情况并避免进行另一个服务调用。提前致谢。

这是脚本：

  $(document).ready(function () {
            $("#selectedRecipientList").select2({ tags: null, tokenSeparators: [",", " "] });
            $('.select2-input').keyup(function (e) {                    
                var currentString = $('.select2-input').val();
                $.ajax({
                    dataType: 'json',
                    url: '@Url.Action("RecipientTypeAhead", "RecipientManager")',
                    data: { query: currentString },
                    success: (function (data) {
                        $('#TypeAheadRecipientsList').empty();
                        $(data).each(function (index, value) {
                            $('#TypeAheadRecipientsList').append('<li onclick="AddRecipientFromPicker(' + JSON.stringify(value) + ')">' + value.DisplayName + '</li>');
                        });
                    })
                });
            });
        });

function AddRecipientFromPicker(someData){} //only ever reaches here if int primitive is passed in

下面是对象在 ajax 方法中返回后的外观示例： {"AccountName":"abc","DisplayName":"abc","Email":"abc@test.net","Id":94654}

4

1 回答 1

2

你不能这样做：

$(data).each(function (index, value) {
    $('#TypeAheadRecipientsList').append('<li onclick="AddRecipientFromPicker(' + JSON.stringify(value) + ')">' + value.DisplayName + '</li>');
});

因为data不是 dom 元素。

尝试这样做：

for(var index in data) {
   var value = data[index];
   $('#TypeAheadRecipientsList').append('<li onclick="AddRecipientFromPicker(' + JSON.stringify(value) + ')">' + value.DisplayName + '</li>');
}

另外请尽量不要使用内联事件处理程序。

所以把它们放在一起：

for(var index in data) {
   var value = data[index];
   var listItem = $('<li>' + value.DisplayName + '</li>');
   listItem.data('value', JSON.stringify(value)).on('click', function(){
       AddRecipientFromPicker($(this).data('value'));
   });
   $('#TypeAheadRecipientsList').append(listItem);
}
于 2012-12-27T20:11:15.513 回答