Я хочу мати спадне меню з набором значень, але також дозволити користувачеві "вибрати" нове значення, яке там не вказано.
Я бачу, що select2 підтримує це, якщо ви його використовуєтеtags
режимі, але чи є спосіб це зробити без використання тегів?
Я хочу мати спадне меню з набором значень, але також дозволити користувачеві "вибрати" нове значення, яке там не вказано.
Я бачу, що select2 підтримує це, якщо ви його використовуєтеtags
режимі, але чи є спосіб це зробити без використання тегів?
Відповіді:
Для версії 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, але зараз не можна знайти посилання)
selectOnBlur: true
зробить роботу дивіться: stackoverflow.com/questions/25616520 / ...
tags: []
разом із createSearchChoice
.
Відмінний відповідь надається @fmpwizard робіт по вибор2 3.5.2 і нижче, але це не буде працювати в 4.0.0 .
З самого початку (але, можливо, ще не в цьому питанні), Select2 підтримує "тегування": користувачі можуть додавати власні значення, якщо ви дозволите їх. Це можна ввімкнути за допомогою tags
параметра, і ви можете пограти з прикладом у документації .
$("select").select2({
tags: true
});
За замовчуванням це створить параметр, який має той самий текст, що і введений ними пошуковий термін. Ви можете змінити об'єкт, який використовується, якщо ви хочете відзначити його спеціальним чином, або створити об’єкт віддалено, як тільки він буде обраний.
$("select").select2({
tags: true,
createTag: function (params) {
return {
id: params.term,
text: params.term,
newOption: true
}
}
});
Окрім того, що слугує прапором, який легко помітити на об'єкті, переданому через select2:select
подію, додаткова властивість також дозволяє відображати опцію дещо по-іншому. Тож якби ви хотіли візуально сигналізувати про те, що це новий варіант, поставивши поруч " (новий) ", ви могли б зробити щось подібне.
$("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;
}
});
Просто задля збереження коду в живих, я публікую код @rrauenza Fiddle з його коментаря .
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'}]
});
Оскільки багато з цих відповідей не працюють у версії 4.0+, якщо ви використовуєте ajax, сервер міг би додати нове значення як опцію. Так би це працювало так:
[{"text":" my NEW option)","id":"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
Все, що вам потрібно зробити, v4.0.6
це використовувати tags: true
параметр.
var text = 'New York Mills';
var term = 'new york mills';
return text.localeCompare(term)===0;
У більшості випадків нам потрібно порівняти значення з нечутливим регістром. І цей код поверне помилковий, що призведе до створення дублікатів записів у базі даних. Більше того, String.prototype.localeCompare () не підтримується браузером Safary, і цей код не працюватиме в цьому браузері;
return this.text.localeCompare(term)===0;
краще замінить на
return this.text.toLowerCase() === term.toLowerCase();
Дякую за допомогу, хлопці, я використав код нижче в Codeigniter II, використовуючи версію: 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]'};
}
},
});