jquery select2 - 不工作
Posted
技术标签:
【中文标题】jquery select2 - 不工作【英文标题】:jquery select2 - not working 【发布时间】:2013-04-17 21:24:17 【问题描述】:我正在使用 select2 插件(ivaynberg.github.io/select2)。我正在尝试显示一个下拉列表(选择)。它正在获取 data.php 中的所有项目作为选项。但是 select2 是自动完成插件,应该搜索客户端输入的搜索词,并仅显示匹配的结果。目前它正在显示所有项目并且没有获得搜索结果。对不起我的语言
data.php 呼应了这一点:
[
"id": "1",
"text": "item1",
"exercise": "blah text"
,
"id": "2",
"text": "item2"
]
代码是:
$(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
;
);
);
输入是:
<input type="hidden" id="thisid" style="width:300px" class="input-xlarge" />
我想找个线索,我对这个插件很陌生,花了一天时间看例子。
【问题讨论】:
查看你的控制台查看 js 错误 控制台没有错误。 它对我有用....你包含 jquery 库 【参考方案1】:如果附加到标准select
表单控件,select2 将不会执行 AJAX。它必须附加到隐藏的 input
控件才能通过 AJAX 加载。
更新:这已在 Select2 4.0 中得到修复。来自Pre-Release notes:
与所有数据适配器的标准
<select>
元素保持一致,无需隐藏<input>
元素。
在他们的examples section函数中也可以看到。
【讨论】:
网站上根本没有记录。它甚至没有给出 html 的示例。 有没有办法使用另一种方法如 $.get 来填充选择控件的选项?我不敢相信他们跳过了如此重要的信息,甚至在 ajax 上(这对于初学者来说非常困难) 这个答案是正确的。你需要使用另一个组件(例如,等)来制作select2 ajax,除了 欲了解更多信息,请参阅此链接-itfrustration.in/jquery-select2-ajax【参考方案2】:我猜 user2315153 想要接收多个远程值,并错误地将带有 ajax 调用的 select2() 分配给 select> 元素。
获取远程值的正确方法是使用普通的 input> 元素,如果需要多个值,请在方法调用时通知“多个”参数。示例:
<input type="hidden" id="thisid" style="width:300px" class="input-xlarge" />
<script>
$('#thisid').select2(
minimumInputLength: 2,
multiple: true,
ajax:
...
select> 元素不能用于远程值
更新:从 select2 4.0.0 开始,隐藏输入已弃用:
https://select2.github.io/announcements-4.0.html#hidden-input
这意味着:使用 SELECT 标记,而不是使用属性 select2 插件的输入。
注意:从您的服务器中使用任何格式的 json 都很容易。只需使用“processResults”即可。
例子:
<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>
【讨论】:
【参考方案3】:我尝试了代码,它运行良好。我认为您没有包含 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>
【讨论】:
您好,谢谢您的回答。但是,它不起作用 - 它说:错误:当附加到 路径没问题 - 我正在使用:bootstrap.css、prettify.css、select2.css、json2.js、jquery-1.7.1.min.js、jquery-ui-1.8。 20.custom.min.js,jquery.mousewheel.js prettify.min.js,bootstrap.min.js, select2.min.js @user2315153 不,你没有。您尝试编辑此帖子。【参考方案4】:我认为没有必要使用隐藏的输入元素。您可以尝试一下,从 ajax 调用中获取纯 html 数据并将其设置进去,然后初始化 select2 重置方法。这是代码sn-p
HTML
<select id="select" name="select" class="select2">
<option value="" selected disabled>Please Select Above Field</option>
</select>
Javascript
$.ajax(
type: "POST",
cache:false,
url: YOUR_AJAX_URL,
success: function(response)
$('#select').html(response);
);
$('#select').select2("val","");
Ajax 响应:
<option value="value">Option Name</option>
.
.
.
<option value="value">Option Name</option>
【讨论】:
【参考方案5】:经过大量阅读,我决定更改 select2.js 本身。
在第 2109 行将其更改为
this.focusser.attr("id", "s2id_"+this.select.context.id);
如果你的输入标签是这样的
<select id="fichier">
因此,您在列表中搜索的输入标签的 id 为 s2id_fichier_search
据我所知,不应该有冲突,这将允许您在同一页面上拥有多个 select2 并通过它们的事件运行您的功能(包括 .get、.post),例如。
$(function()
$('#s2id_fichier_search').keyup(function()
console.log('Be Practical')
)
所以这会像你使用一样运行
<select id="fichier" onkeyup="console.log('Be Practical')">
【讨论】:
【参考方案6】:在我的例子中,旧版本的 select2 库导致了这个问题,请确保在网页中包含最新版本的 js 和 css。
【讨论】:
以上是关于jquery select2 - 不工作的主要内容,如果未能解决你的问题,请参考以下文章