Я хочу иметь выпадающий список с набором значений, а также позволить пользователю, чтобы "выберите" и новое значение, не перечисленных здесь.
Я вижу, что select2 Поддержка если вы используете его в режиме жетоны
, но есть ли способ сделать это без маркеров?
В отличный ответ обеспечивается @fmpwizard работает на Select2 3.5.2 и ниже, но он не будет работать в 4.0.0.
С самого начала (но, возможно, не так рано, как этот вопрос), Select2 поддерживает и"меток" и:, где пользователи могут добавить в свою собственную ценность, если вы позволите им. Это может быть включено через опцию теги
, и вы можете играть вокруг С пример в документации.
$("select").select2({
tags: true
});
По умолчанию, это позволит создать вариант, что один и тот же текст как термин поиска, который они вошли. Вы можете модифицировать объект, который используется, если вы хотите, чтобы отметить его особым образом, или создать объект удаленно, как только он выбран.
$("select").select2({
tags: true,
createTag: function (params) {
return {
id: params.term,
text: params.term,
newOption: true
}
}
});
В дополнение к сервировке как легко заметить флаг на объект, переданный в рамках `select2:событие Выберите, дополнительное свойство также позволяет визуализировать функцию немного по-другому в результате. Так что если вы хотели визуально сигнализировать о том, что это новый вариант, поставив себе " (Новый)Аскорутин; рядом с ним, вы могли бы сделать нечто подобное.
$("select").select2({
tags: true,
createTag: function (params) {
return {
id: params.term,
text: params.term,
newOption: true
}
},
templateResult: function (data) {
var $result = $("<span></span>");
$result.text(data.text);
if (data.newOption) {
$result.append(" <em>(new)</em>");
}
return $result;
}
});
Для версии 4+ проверка этот ответ ниже Кевин Браун
В Select2 3.5.2 и ниже, можно использовать что-то вроде:
$(selector).select2({
minimumInputLength:1,
"ajax": {
data:function (term, page) {
return { term:term, page:page };
},
dataType:"json",
quietMillis:100,
results: function (data, page) {
return {results: data.results};
},
"url": url
},
id: function(object) {
return object.text;
},
//Allow manually entered text in drop down.
createSearchChoice:function(term, data) {
if ( $(data).filter( function() {
return this.text.localeCompare(term)===0;
}).length===0) {
return {id:term, text:term};
}
},
});
(взято из ответа на select2 список рассылки, но не могу найти сейчас ссылку)
Просто ради сохранить код жив, Я'м проводки [@rrauenza Скрипка's код][1] из свой комментарий.
В формате HTML
<input type='hidden' id='tags' style='width:300px'/>
на jQuery
$("#tags").select2({
createSearchChoice:function(term, data) {
if ($(data).filter(function() {
return this.text.localeCompare(term)===0;
}).length===0)
{return {id:term, text:term};}
},
multiple: false,
data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
});
Поскольку многие из этих ответов не't работа в 4.0+, если вы используете Аякс, ты мог бы сервера добавить новое значение в качестве опции. Так это будет работать примерно так:
[{с"текст" и:" Мой новый вариант) и" и"ИД" и:"в 0" - а}]
Существует лучшее решение, я думаю, сейчас
просто набор тегов, чтобы верно выбрать варианты ?
tags: true
Улучшения на @fmpwizard ответ:
//Allow manually entered text in drop down.
createSearchChoice:function(term, data) {
if ( $(data).filter( function() {
return term.localeCompare(this.text)===0; //even if the this.text is undefined it works
}).length===0) {
return {id:term, text:term};
}
},
//solution to this error: Uncaught TypeError: Cannot read property 'localeCompare' of undefined
Я просто наткнулся на это от Кевин Браун. https://stackoverflow.com/a/30019966/112680
Все что вам нужно сделать для В4.0.6` - теги использовать: параметр значение true.
var text = 'New York Mills';
var term = 'new york mills';
return text.localeCompare(term)===0;
В большинстве случаев мы должны сравнить значения с бесчувственным регистрации. И этот код будет возвращать false, что приведет к созданию дублирующих записей в базе данных. Более Того Строки.прототип.методом localecompare () не поддерживается в сафари-браузере и этот код не будет работать в данном браузере;
return this.text.localeCompare(term)===0;
лучше заменить
return this.text.toLowerCase() === term.toLowerCase();
Спасибо за помощь, ребята, я использовал ниже код в CodeIgniter с Я я использую версия: 3.5.2 в select2.
var results = [];
var location_url = <?php echo json_encode(site_url('job/location')); ?>;
$('.location_select').select2({
ajax: {
url: location_url,
dataType: 'json',
quietMillis: 100,
data: function (term) {
return {
term: term
};
},
results: function (data) {
results = [];
$.each(data, function(index, item){
results.push({
id: item.location_id,
text: item.location_name
});
});
return {
results: results
};
}
},
//Allow manually entered text in drop down.
createSearchChoice:function(term, results) {
if ($(results).filter( function() {
return term.localeCompare(this.text)===0;
}).length===0) {
return {id:term, text:term + ' [New]'};
}
},
});