jquery select2 - 不工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16190088/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery select2 - not working
提问by user2315153
I am using select2 plugin(ivaynberg.github.io/select2). I am trying to display a dropdown(select). It is getting all the items in data.php as options. However select2 is meant to be autocomplete plugin and should search for the search term a client input, and display the matching results only. At the moment it is displaying all the items and not getting the search results. Sorry for my language
我正在使用 select2 插件（ivaynberg.github.io/select2）。我正在尝试显示一个下拉列表（选择）。它正在获取 data.php 中的所有项目作为选项。但是 select2 是自动完成插件，应该搜索客户端输入的搜索词，并仅显示匹配的结果。目前它正在显示所有项目，但没有获得搜索结果。对不起我的语言
data.php is echoing out this:
data.php 呼应了这一点：
[{
"id": "1",
"text": "item1",
"exercise": "blah text"
}, {
"id": "2",
"text": "item2"
}
]
The code is:
代码是：
$(document).ready(function () {
$('#thisid').select2({
minimumInputLength: 2,
ajax: {
url: "data.php",
dataType: 'json',
data: function (term, page) {
return {
q: term
};
},
results: function (data, page) {
return {
results: data
};
}
}
});
});
and the input is:
输入是：
<input type="hidden" id="thisid" style="width:300px" class="input-xlarge" />
I want to find a clue, I am quite new to this plugin and have spent a day for looking at examples.
我想找到一个线索，我对这个插件很陌生，花了一天时间查看示例。
回答by GGregson
select2 will not do AJAX if attached to a standard selectform control. It MUST be attached to a hidden inputcontrol to load via AJAX.
如果附加到标准select表单控件，select2 将不会执行 AJAX 。它必须附加到隐藏input控件才能通过 AJAX 加载。
Update: This has been fixed in Select2 4.0. From Pre-Release notes:
更新：这已在 Select2 4.0 中修复。从预发布说明：
Consistency with standard
<select>elements for all data adapters, removing the need for hidden<input>elements.
与
<select>所有数据适配器的标准元素保持一致，无需隐藏<input>元素。
It can also be seen in function in their examples section.
它也可以在他们的示例部分的功能中看到。
回答by Marcelo Amorim
I guess user2315153 wants to receive multiple remote values, and incorrectly assigning select2() with ajax call to a <select> element.
我猜 user2315153 想要接收多个远程值，并错误地将 select2() 与 ajax 调用分配给 < select> 元素。
The correct way to get remote values, is using a normal <input> element, and if is desired multiple values, inform the "multiple" parameter on method call. Example:
获取远程值的正确方法是使用普通的 < input> 元素，如果需要多个值，请在方法调用时通知“multiple”参数。例子：
<input type="hidden" id="thisid" style="width:300px" class="input-xlarge" />
<script>
$('#thisid').select2({
minimumInputLength: 2,
multiple: true,
ajax: {
...
The <select> element CAN NOT be used to remote values
< select> 元素不能用于远程值
UPDATE:As of select2 4.0.0, hidden inputs has deprecated:
更新：从 select2 4.0.0 开始，隐藏输入已弃用：
https://select2.github.io/announcements-4.0.html#hidden-input
https://select2.github.io/announcements-4.0.html#hidden-input
This means: Instead of using an input to attrib select2 plugin, use an SELECT tag.
这意味着：不要使用 attrib select2 插件的输入，而是使用 SELECT 标签。
Pay attention: it's easy to use any format of json from your server. Just use "processResults" to do it.
请注意：从您的服务器使用任何格式的 json 都很容易。只需使用“processResults”即可。
Example:
例子：
<select id='thisid' class='select2-input select2'></select>
<script>
$("#thisid").select2({
multiple: true,
closeOnSelect: true,
ajax: {
url: "myurl",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term,
page: params.page
};
},
processResults: function (data, page) { //json parse
console.log("processing results");
//Transform your json here, maybe using $.map jquery method
return {
results: yourTransformedJson
};
},
cache: (maybe)true
}
});
</script>
回答by Tamil Selvan C
I try the code, it works well. I think you not include jquery framework or check the path of js and css.
我试了一下代码，效果很好。我认为您没有包含 jquery 框架或检查 js 和 css 的路径。
<!DOCTYPE html>
<html>
<head>
<link href="select2.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="select2.min.js"></script>
<script>
$(document).ready(function() {
$('#thisid').select2({
minimumInputLength: 2,
ajax: {
url: "data.php",
dataType: 'json',
data: function (term, page) {
return {
q: term
};
},
results: function (data, page) {
return {
results: data
};
}
}
});
});
</script>
</head>
<body>
<input type="hidden" id="thisid" style="width:300px" class="input-xlarge" />
</body>
</html>
回答by Hardik Thaker
I think no need to go with hidden input element. You can give a try, get plain html data from ajax call and set it in and then init select2 resetting method. Here's code snippet
我认为没有必要使用隐藏的输入元素。您可以尝试一下，从ajax调用中获取纯html数据并将其设置为init select2重置方法。这是代码片段
HTML
HTML
<select id="select" name="select" class="select2">
<option value="" selected disabled>Please Select Above Field</option>
</select>
Javascript
Javascript
$.ajax({
type: "POST",
cache:false,
url: YOUR_AJAX_URL,
success: function(response)
{
$('#select').html(response);
}
});
$('#select').select2("val","");
Ajax Response :
阿贾克斯响应：
<option value="value">Option Name</option>
.
.
.
<option value="value">Option Name</option>
回答by Shakir
After much reading, I decided to change the select2.js itself.
经过大量阅读，我决定更改 select2.js 本身。
At line 2109 change it to
在第 2109 行将其更改为
this.focusser.attr("id", "s2id_"+this.select.context.id);
If your input tag is as so
如果你的输入标签是这样
<select id="fichier">
Hence your input tag that is searching through the list will have an id of s2id_fichier_search
因此，您在列表中搜索的输入标签的 ID 为s2id_fichier_search
As far as I know, there shouldn't be a conflict and THIS will allow you to have multiple select2 on the same page and run your functions (including .get, .post) through their events eg.
据我所知，不应该有冲突，这将允许您在同一页面上有多个 select2 并通过它们的事件运行您的函数（包括 .get、.post），例如。
$(function() {
$('#s2id_fichier_search').keyup(function() {
console.log('Be Practical')
})
}
So this will run like if you were to use
所以这会像你要使用一样运行
<select id="fichier" onkeyup="console.log('Be Practical')">
回答by Hafiz Siddiq
In my case, an older version of select2 library was causing the issue, make sure that you include the latest version of js and css in the web page.
就我而言，是旧版本的 select2 库导致了该问题，请确保在网页中包含最新版本的 js 和 css。
