select2的ajax不执行,javascript - Select2 Ajax方法未选择

javascript - Select2 Ajax方法未选择

好吧，我确定这里有一些简单的设置错误，但我不是100％它是什么。

所以我试图使用Select2 AJAX方法作为用户搜索数据库和选择结果的方式。 呼叫本身会返回结果，但不允许我从列表中选择答案。 它似乎也不允许您在悬停或向上/向下箭头上“选择”它。 所以不用多说，这是我的代码：

的index.html

select.js

jQuery(function() {

var formatSelection = function(bond) {

console.log(bond)

return bond.name

}

var formatResult = function(bond) {

return '

' + bond.name + '

'

}

var initSelection = function(elem, cb) {

console.log(elem)

return elem

}

$('.select2').select2({

placeholder: "Policy Name",

minimumInputLength: 3,

multiple: false,

quietMillis: 100,

ajax: {

url: "http://localhost:3000/search",

dataType: 'json',

type: 'POST',

data: function(term, page) {

return {

search: term,

page: page || 1

}

},

results: function(bond, page) {

return {results: bond.results, more: (bond.results && bond.results.length == 10 ? true: false)}

}

},

formatResult: formatResult,

formatSelection: formatSelection,

initSelection: initSelection

})

})

JSON响应

{

error: null,

results: [

{

name: 'Some Name',

_id: 'Some Id'

},

{

name: 'Some Name',

_id: 'Some Id'

}

]

}

一切似乎都正确拉入，但我无法真正选择答案并将其输入到框中。 我的代码中某处有问题吗？

6个解决方案

139 votes

看了另一个答案之后，似乎我还需要在每次调用时传递id字段，否则它将禁用输入。

修复它的示例代码：

$('.select2').select2({

placeholder: "Policy Name",

minimumInputLength: 3,

multiple: false,

quietMillis: 100,

id: function(bond){ return bond._id; },

ajax: {

url: "http://localhost:3000/search",

dataType: 'json',

type: 'POST',

data: function(term, page) {

return {

search: term,

page: page || 1

}

},

results: function(bond, page) {

return {results: bond.results, more: (bond.results && bond.results.length == 10 ? true: false)}

}

},

formatResult: formatResult,

formatSelection: formatSelection,

initSelection: initSelection

})

编辑

由于这一点不断上升，我会详细说明一下。 .select2()方法需要在所有结果上使用唯一的._id字段。 谢天谢地，有一个解决方法。 return ._id;选项接受如下函数：

function( ) {

// Expects you to return a unique identifier.

// Ideally this should be from the results of the $.ajax() call.

}

由于我的唯一标识符是._id，我只是return ._id;

AlbertEngelB answered 2019-06-14T23:17:32Z

11 votes

问题是JSON数据需要一个名为“id”的属性。 没有必要

id：function(bond){return bond._id;}

如果数据本身没有id，你可以在processResults上添加一个函数，就像这里一样。

$(YOUR FIELD).select2({

placeholder: "Start typing...",

ajax: {

type: "POST",

contentType: "application/json; charset=utf-8",

url: "YOUR API ENDPOINT",

dataType: 'json',

data:

function (params) {

return JSON.stringify({ username: params.term });

},

processResults: function (data, page) {

var results = [];

$.each(JSON.parse(data.d), function (i, v) {

var o = {};

o.id = v.key;

o.name = v.displayName;

o.value = v.key;

results.push(o);

})

return {

results: results

};

},

cache: true

},

escapeMarkup: function (markup) { return markup;},

minimumInputLength: 1,

templateResult: function (people) {

if (people.loading)

return people.text;

var markup = '' + people.name + '';

return markup;

},

templateSelection: function (people) { return people.value || people.text }

});

Andres Gonzalez answered 2019-06-14T23:18:09Z

5 votes

也要小心案例。 我使用的是Id但是select2预计为id.可以节省一些人的时间。

Eugene answered 2019-06-14T23:18:34Z

4 votes

就像Dropped.on.Caprica所说：每个结果项都需要一个唯一的id。

所以只需为每个结果id分配一个唯一的数字：

$('#searchDriver').select2({

ajax: {

dataType: 'json',

delay: 250,

cache: true,

url: '/users/search',

processResults: function (data, params) {

//data is an array of results

data.forEach(function (d, i) {

//Just assign a unique number or your own unique id

d.id = i; // or e.id = e.userId;

})

return {

results: data

};

},

},

escapeMarkup: function (markup) { return markup; },

minimumInputLength: 1,

templateResult: formatRepo,

templateSelection: formatRepoSelection

});

Anh Cao answered 2019-06-14T23:19:05Z

1 votes

关于以下错误我有很多问题Select2不允许使用选项'ajax'

在我的情况下，当您使用select2版本3.5时出现select，所以你应该升级到4.0版，你不需要附加到你的选择的隐藏输入

Ebrahim answered 2019-06-14T23:19:37Z

0 votes

您可以通过以编程方式打开enter元素然后触发select2按键来触发选择选项(在本例中为第一个选项)。

var e = jQuery.Event('keydown');

e.which = 13;

$('.offer_checkout_page_link select').select2('open');

$('.offer_checkout_page_link .select2-selection').trigger(e);

这将“设置”该选项，就像您单击它一样。 您可以通过在触发select2之前触发相应数量的enter按键来修改此选项以选择特定选项。

当你点击(或者在这种情况下命中enter)来选择一个选项时，看起来好像在引擎盖下，一个选项元素被添加到select元素。 您会注意到，当页面首次加载时，select2选择元素没有任何option元素子元素。 这就是为什么其他解决方案建议使用jQuery添加选项元素然后选择它的原因。

Justin Leveck answered 2019-06-14T23:20:18Z