Select2 Ajax函数不返回选择框

时间:2015-06-30 12:40:10

标签: ajax coffeescript jquery-select2

在我的coffeescript中,我有这个设置

$ajaxSelect = $('select.ajax-select').select2
        ajax:
            url: (params) ->
                return "/mppc-people-manager/users/find_users/#{params.term}"
            delay: 250
            dataType: 'json'
            data: (params) ->
                console.log params
            processResults: (data) ->
                console.log data
                formatted = []
                $.each data, (i, val) ->
                    console.log val
                    formatted.push
                        id: val.User.id
                        text: "<img src='#{val.User.photo_filename}' class='face'><span class='name'>#{val.User.full_name}</span>"
                    return {
                        results: formatted
                    }

从我的网址返回的json看起来像这样

[  
   {  
      "User":{  
         "id":"557ae341-b618-4028-8b93-496216ed9843",
         "photo_filename":"photos\/558bec2e-2eb8-404c-a344-462816ed9843\/selfie-stick.jpg",
         "full_name":"Jordan Riser"
      }
   }
]

我复制了我在ajax示例正上方的示例中看到的格式,其中每个数组项都是一个对象,每个对象都包含id:text:值,但这不是正确的格式吗?

ajax示例和文档只是解释了它需要以select2期望的方式返回,但究竟是什么意思?

这里任何方向都会很棒!

1 个答案:

答案 0 :(得分:0)

我最终通过在后端传递每个对象中包含id:text:元素的对象数组,然后将其传递给processResults函数返回的结果来实现它。这是我的coffeescript传递结果

$ajaxSelect = $('select.ajax-select').select2
        placeholder: "Select a state"
        ajax:
            delay: 250
            dataType: 'json'
            cache: false
            processResults: (data,page) ->
                { results: $.map data, (item,i) ->
                    {
                        text: item.text
                        slug: null
                        id: item.id
                    }
                }
        minimumInputLength: 1
        templateSelection: (selection) ->
            return $.parseHTML(selection.text)
        templateResult: (result) ->
            return $.parseHTML(result.text)

我不会显示我的后端代码,因为它对这个问题无关紧要,只知道我传递了一些看起来像这样的东西

[{
    id: 1,
    text: 'Text'
},{
    id: 2,
    text: 'Text'
}]