选择2不加载数据
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了选择2不加载数据相关的知识,希望对你有一定的参考价值。
我最近升级到Rails 5.2和ruby 2.5.1,我的选择框停止工作。
我不得不在我的qazxsw poi中更改require文件并添加完整版本甚至查看选择框
admin.js
但现在ajax查询获取数据甚至初始选择都没有显示任何结果。我正在使用//= require select2-full
将数据传递给我的js,我已经检查过gon具有正确的值。我的js.coffee如下:
Gon
我的控制器搜索端点:
clientFormatResult = (client) ->
client.email
clientFormatSelection = (client) ->
client.email
$ ->
$select_input = $('#publish_to')
$select_input.val(' ')
$select_input.select2({
width: '420px'
height: 'auto'
placeholder: "Search"
minimumInputLength: 2
multiple:true
closeOnSelect: true
tokenSeparators:[',',' ']
ajax: {
url: $select_input.data('search-endpoint')
data: (term, page) ->
{
q: term # search term
page_limit: 10
}
results: (data, page) -> # parse the results into the format expected by Select2.
console.log("result")
# since we are using custom formatting functions we do not need to alter remote JSON data
results: data.manage_clients
}
initSelection: (element, callback) ->
callback(gon.published_to)
formatResult: clientFormatResult
formatSelection: clientFormatSelection
})
搜索端点结果:
def search
clients = Client.where("email like '%#{params[:q]}%'").map { |c| { :id => c.id, :email => c.email } }
render :json => clients
end
private
def client_params
params.require(:client).permit(:email, :password, :password_confirmation, :first_name, :last_name, :organisation, :assigned_team)
end
选择输入所在的视图源代码的提取:
{
"manage_clients": [
{
"id": 46,
"email": "aaaa@example.net"
},
{
"id": 365,
"email": "bbbb@example.org"
}
]
}
我已经尝试了解决控制器的问题<div class="input string required publish_to">
<label class="string required control-label" for="report_clients">
Publish to
</label>
<input data-search-endpoint="/my-endpoint-search" id="publish_to" name="publish_to" type="hidden" value="" multiple="" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true"><span class="select2 select2-container select2-container--default" dir="ltr" style="width: 420px;"><span class="selection"><span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="-1"><ul class="select2-selection__rendered"><li class="select2-search select2-search--inline"><input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" role="textbox" aria-autocomplete="list" placeholder="Search for a client" style="width: 418px;"></li></ul></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
<div>
<a class="add_button button" href="/some_url">Action</a>
</div>
</div>
,但没有变化。我也尝试将suggested here添加到ajax调用为dataType: 'json'
在第一个select2的末尾添加suggested here我尝试手动将.select2('val',[])
添加到{ id: '1', text:'example' }
我在控制台中没有收到任何错误
但是ajax调用似乎没有起作用。在控制台中没有对搜索端点的调用。
问题是我使用的是select2 4.0,代码是为3.5设计的
我不得不将输入更改为select,并添加一个multiple =“multiple”属性,而不是将其声明为select2选项的一部分。这是使其发挥作用的主要变化。在进行了一些调整之后,我不得不更改initSelection格式化程序并将结果的ajax结果更改为processResults。最终的代码是这样的:
initSelection
和咖啡因:
%select#publish_to{ :name => 'publish_to', :multiple => 'multiple', :type => 'hidden', "data-lookup-endpoint" => my_endpoint_path }
控制器,将参数从formatValues = (values) ->
data = []
i = 0
while i < values.length
data.push
id: values[i].id
text: values[i].email
i++
data
$ ->
$select_input = $('#publish_to')
$select_input.val('')
$select_input.select2({
placeholder: 'Search for a Client'
width: '420px'
height: 'auto'
data: formatValues(gon.published_to)
allowClear: true
minimumInputLength: 2
tokenSeparators:[',',' ']
ajax: {
url: $select_input.data('lookup-endpoint')
dataType: 'json'
data: (term, page) ->
{
q: term # search term
}
processResults: (data, page) -> # parse the results into the format expected by Select2.
# since we are using custom formatting functions we do not need to alter remote JSON data
results: formatValues(data.manage_clients)
}
})
# To set initial values:
$('#publish_to').val(getIds(gon.published_to)).trigger 'change'
改为[:q]
:
[:q][:term]
以上是关于选择2不加载数据的主要内容,如果未能解决你的问题,请参考以下文章