[英]Can't select item with jQuery .select2
I'm new to jQuery and Javascript so maybe someone can help me out? 我是jQuery和Javascript的新手,所以也许有人可以帮帮我? I used .select2 to get this result but I'm not able to select and item. 我使用.select2获得此结果,但无法选择和设置项目。 Here is the code 这是代码
JAVASCRIPT JAVASCRIPT
$("#namesCombobox").select2({
placeholder: "Search for a name",
minimumInputLength: 3,
ajax: {
url: "/api/machineparkcustomers/getnamescontaining",
dataType: 'json',
quietMillis: 250,
data: function (term, page) {
return {
query: term,
};
},
results: function (data, page) {
return {
results: data
};
},
cache: true
},
formatResult: function (state) {
return state;
}
});
HTML: HTML:
<input type="text" id="namesCombobox" class="col-sm-12" />
You don't show what the data looks like that your ajax request returns, but judging by your formatSelection
function and the behavior you are experiencing, I am guessing that the data is an array of strings. 您没有显示ajax请求返回的数据是什么样子,但是从您的formatSelection
函数和您所遇到的行为来看,我猜该数据是一个字符串数组。 What it should be is an array of objects, where each object has an id
property and a text
property. 它应该是一个对象数组,其中每个对象都有一个id
属性和一个text
属性。
This jsfiddle shows the problem. 这个jsfiddle显示了问题。
Try changing the ajax results
function to this: 尝试将ajax results
函数更改为此:
results: function(data) {
return { results: $.map(data, function(state) {
return { id: state, text: state }
}) };
}
You will also have to remove the formatResult
function. 您还必须删除formatResult
函数。
Found this question while searching for a solution to a similar problem The accepted answer is great, but not my issue. 在寻找类似问题的解决方案时发现了这个问题公认的答案很好,但不是我的问题。
Select2 provides a callback "id" function that it will invoke to determine the ID you'd like to use for each result in the data. Select2提供了一个回调“ id”函数,它将调用该函数来确定您要用于数据中每个结果的ID。 For my case my "id" function was not correct. 就我而言,我的“ id”功能不正确。
this.el.select2({
minimumInputLength: 12,
query: this.search.bind(self),
id: function (clinicianDto) { return clinicianDto.id(); },
formatResult: function (clinicianDto: any) {
return "<div class='row'><div class='col-sm-12' >" + clinicianDto.firstName() + ' ' + clinicianDto.lastName() + "</div></div>";
},
formatSelection: function (clinicianDto: any) {
return clinicianDto.firstName() + ' ' + clinicianDto.lastName();
},
initSelection: function (element, callback) {
if (self.selectedClinician) {
callback(self.selectedClinician.SerializeModel());
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.