use*_*153 20 ajax jquery jquery-select2
我正在使用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" />
我想找到一个线索,我对这个插件很新,并花了一天时间查看示例.
我想user2315153想要接收多个远程值,并错误地将select2()与ajax调用分配给< select >元素.
获取远程值的正确方法是使用普通的< input >元素,如果需要多个值,请在方法调用中通知"multiple"参数.例:
<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>
我尝试了代码,效果很好.我认为你不包括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>