使用select2 3.5.2中的initSelection进行自定义筛选
Using initSelection in select2 3.5.2 for custom filtering
我有一个使用select2的文本字段。这里是初始化:
$("#foo").select2({
createSearchChoice:function(term, data) {
if ($(data).filter(function() {
return this.text.localeCompare(term)===0;
}).length===0)
{return {id:term, text:term};}
},
initSelection : function (element, callback) {
var data = {id: element.val(), text: element.val()};
callback(data);
},
tags:[],
tokenSeparators: [","],
data: [...data goes here...]
});
在这个字段中,用户应该输入一个数字,或者从列表中选择项目。如果用户放入的项目没有出现在列表中,则应该将其创建为一个简单标记(id和文本相同)。这是有效的。
不起作用的是当我以编程方式设置值时:
myvar.find('.placeholder lorem-ipsum').val(number).trigger("change");
它现在的工作方式是,当我将其设置为任何值时,它都会毫无怨言地接受它,从而生成一个新的简单标签。然而,如果我要完全删除initSelection参数,它将忽略未知值,并使用从列表中获取的已知值(其中标记是复杂的-id和文本不同)。
如果我为字段设置的值在列表中找到,它将使用该项,否则将制作一个简单的标记,我该如何制作它?它现在的工作方式(仅限简单标记)是可以接受的,但我更希望它能理想地工作。
编辑:我已经举例说明了它在使用和不使用initSelection参数的情况下是如何工作的。
http://jppk.byethost12.com/with.html
http://jppk.byethost12.com/without.html
简言之,当我推送"添加新项目"时,我希望它像with.html一样工作,而当我推送给"添加现有项目"时则像without.html一样工作。
以下是我对您所需内容的最佳解释。
JSFiddle
诀窍是将元素附加到选择字段。
var array = ['foo', 'bar', 'baz']
$.each(array, function(key, value) {
appendSelect(value);
});
$("#foo").select2();
$('#submit').click(function() {
var val = $('#name').val();
$('#name').val('');
array.push(val);
appendSelect(val);
});
function appendSelect(value) {
$('#foo').append($("<option></option>").text(value));
}
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.1/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0-rc.1/js/select2.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class='container'>
<select id='foo' multiple="multiple" class='form-control'></select>
<label>Input</label>
<input id='name' />
<button id='submit'>submit</button>
</div>
很久以后,我找到了一个正确的解决方案:
initSelection : function (element, callback) {
var eArr = element.val().split(",");
var data = [];
for (var i=0;i<eArr.length;i++) {
for (var j=0;j<preExistingData.length;j++) {
if (preExistingData[j]["id"] === eArr[i]) {
data.push(preExistingData[j]);
continue;
}
}
data.push({id: eArr[i], text: eArr[i]});
}
callback(data);
},
这不仅检查该值是否在预先存在的值中(在这种情况下,它使用该项),还检查该值是不是逗号分隔的值列表(在这种情形下,它将它们正确地封装为JS对象)。
相关文章:
- 数据表自定义筛选
- 类别自动完成jQuery中的单词级自定义筛选器,而不是子字符串
- 想要将ng个repeat对象传递给自定义筛选函数
- 自定义筛选器不'我不使用django数据表视图创建的ajax.data.Json
- 在模型可用之前调用使用 app.filter 的自定义筛选器
- 使用select2 3.5.2中的initSelection进行自定义筛选
- "键未定义”;在AngularJS'的自定义筛选功能
- 如何通过在 Fabric JS 中传递颜色代码来创建自定义筛选器
- Angular.js 中字符串特定部分的自定义筛选器表达式
- 自定义筛选器排序方式
- AngularJs:错误:用于配对项目的自定义筛选器引发错误:“达到 10 次 $digest() 迭代.流产!
- 将带有属性的自定义筛选器传递到角度中的自定义指令
- 如何在自定义筛选器中添加多个参数
- 将重复项传递给自定义筛选器
- 将URL的一部分传递给AngularJS中的自定义筛选器
- Typescript+angularjs自定义筛选器未知提供程序:
- 按数组值进行角度自定义筛选
- 用于搜索JSON数据的自定义筛选器
- 为Kendo网格中的特定列自定义筛选消息
- $timeout或$apply在自定义筛选器中使用时导致无限循环