vanillaSelectBox
1.0.0
NPM I vanillaSelectbox
Если вы выберете все элементы, когда список фильтруется текстовым полетом, он поместит значение все заполнителю, даже если он не выбранных значений, если вы закроете и снова откроете выбор, вы заметите, что не все значения проверены, и заполнитель говорит все
Идея состоит в том, чтобы использовать элемент обыденного выбора, скрыть его и вместо этого предоставить приятное раскрытие. Но данные поступают из исходного элемента, и этот обновляется с помощью выбора и все еще получает событие изменения. Исключением является удаленный init () и функции удаленного search (), добавленные с помощью v 0,75, но им требуется, по крайней мере, пустой элемент выбора, и результат все еще предоставляется в исходном элементе. Не стесняйтесь спрашивать больше объяснений на вкладке «Дискуссии». До скорой встречи
Demo Classic: https://philippemarcmeyer.github.io/vanillaselectbox/index.html?v=1.05
Демонстрация удаленного: https://philippemarcmeyer.github.io/vanillaSelectbox/ajaxdemo.html?v=1.05
let selectBox = new vanillaSelectBox("#brands",{"maxHeight":200,search:true});
<select id="brands" multiple size="3">
selectBox = new vanillaSelectBox("#brandsOne", { "maxHeight": 200, "search": true, "placeHolder": "Choose a brand..." });
selectBox.disableItems(['Lamborghini','Land Rover']);
v1.05: коррекция ошибок setValue () в одиночном режиме. Вы не могли установить значение
v1.04: выберите все проблемы, исправленные https://github.com/arthur911016
v1.03: getResult () новая фонкция для получения выбранных значений в массиве
v1.02: добавление 2 новых параметров «Itemsparator», чтобы изменить по умолчанию »,« Разделитель элемента, отображаемый в кнопке и переводах.
v1.01: удаление бесполезной строки кода 550 551 выпуск 71 от Cchchch
v1.00: из -за спроса: добавлен файл package.json и переключен на 1.0.0 при подготовке к загрузке в NPM
v0.78: Прекратите использование встроенных стилей в основной кнопке. Вы можете украсть использование KeepInlineStyles: верно использовать устаревшее поведение
v0.77: Работа над держателем места с Bastoune help => Похоже, что по -прежнему теряет значение заполнителя в нескольких раскрывающемся чек.
v0.76: Возможность изменить выпадающее дерево и изменить функцию удаленного поиска + исправление empty () функция
v0.75: Удаленный поиск готовы + локальный поиск изменение: когда проверка на optgroup проверяет детей, только если они не исключены из поиска.
v0.72: удаленный поиск (WIP) Bugfix [x] Выберите все дублированные
v0.71: удаленный поиск (WIP) Better Code => Функция Direte Search Doniened Deined должна вернуть обещание
v0.70: удаленный поиск (WIP) может быть протестирован. Работает только в 1 меню уровня (не optgroups)
v0.65: два уровня: Исправление ошибки: группы проверяются/не контролируются при проверке всех/сфокусировать все нажимают все
v0.64: два уровня: группы теперь проверяют, чтобы проверить/снять снки
v0.63: два уровня: один щелчок по группе выбирает / не возмещает детей
v0.62: Новая опция: MaxoptionWidth установил максимальную ширину для каждой опции для узких меню (Ellipsis Troncature)
v0.61: Новая опция: maxselect, установите максимум для выбираемых параметров в меню с множественным выбором
v0.60: два уровня: optgroups теперь используются для показа двух выпадений уровней
v0.59: Исправление ошибок: поле поиска перекрывалось первым элементом в одиночных выборах
v0.58: исправления ошибок
v0.57: Исправление ошибок (опция Minwidth Option не удостоена чести)
v0.56: Multiselect F -флажки немного меньше, опция Maxwidth теперь работает + добавленная опция Minwidth, а кнопка теперь имеет атрибут стиля для защиты своего внешнего вида
v0.55: Все атрибуты из исходных параметров выбора копируются в элемент Selectbox. Excected => «Выбран», «Отключено», «Данные-текст», «Value Data», «Стиль»
v0.54: если все параметры выбора выбираются пользователем, то проверен флажок «Проверка всего».
v0.53: если выбраны все параметры выбора, то флажок проверки All проверен => См. Демо "Выберите все тест"
v0.52: лучшая поддержка Select ('All') => Команда согласуется с флажком и выбором / отменой при поиске SELECT / UNHECHED Только найденные элементы
v0.51: переводы для выбора All/очистить все + незначительные исправления CSS + Не выбирайте отключенные элементы
v0.50: PR от https://github.com/jaguerra2017 Добавление выбора All/Clear All Check Кнопка + поддержка OptGroup!
v 0,41: Исправлена ошибка, содержание меню было неуместно, если на родитель
v 0,40: нажмите на один SelectBox закройте другие открытые поля
v 0,35: вы можете включить и отключить предметы. Уже дискритирующие параметры выбора также используются во время инициирования.
v 0,30: меню перестает перемещаться вокруг размер окна и прокручивать + z-индекс в порядке создания для нескольких экземпляров
v 0,26: исправленная ошибка в режиме StayoPen с функцией Disable ()
v 0,25: новая опция Stainopen, а Dropbox больше не является Dropbox, а хороший многопользовательский
v 0,22: мигрирование функции в VanillaSelectbox Prototype => Несколько экземпляров vanillaSelectbox (), но 1 набор функций в памяти
v 0,21: т.е. 11 совместимость
v 0,20: Working SelectBox как один, так и несколько вариантов, с поисковым боксом!
v 0,10: функциональный плагин как для одиночных, так и для нескольких выборов, без поля поиска на данный момент
v 0,02: Добавленное событие изменения отправки, чтобы выбрать + более приятную галочку
v 0,01: First Commit => Основы для одного блока SELECT + DOM очищается, если вы дважды
ОДИНСКОЕ МЕНЮ SELECT:
<select id="singleTest">
<option value="Abarth" >Abarth</option>
<option value="Alfa Romeo">Alfa Romeo</option>
<option value="Alpine">Alpine</option>
<option value="Aston Martin" >Aston Martin</option>
<option value="Audi" >Audi</option>
<option value="Bentley" >Bentley</option>
<option value="BMW" >BMW</option>
<option value="Cadillac">Cadillac</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Citroën">Citroën</option>
<option value="Cupra">Cupra</option>
<option value="DACIA">Dacia</option>
</select>
let selectCars = new vanillaSelectBox(
"#singleTest",
{
"placeHolder":"Choose your car",
translations: { "all": "All", "items": "Cars" }
});
Несколько выбранных меню: обратите внимание на «множественное» атрибут в меню «Несколько выбранных» и размер = "2", чтобы заменить строку с запятой избранных элементов на «3 элемента», где выбираются более чем размера (здесь элементы переводятся на автомобили)
<select id="multiTest" multiple size="2">
<option value="Abarth" >Abarth</option>
<option value="Alfa Romeo">Alfa Romeo</option>
<option value="Alpine">Alpine</option>
<option value="Aston Martin" >Aston Martin</option>
<option value="Audi" >Audi</option>
<option value="Bentley" >Bentley</option>
<option value="BMW" >BMW</option>
<option value="Cadillac">Cadillac</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Citroën">Citroën</option>
<option value="Cupra">Cupra</option>
<option value="DACIA">Dacia</option>
</select>
let selectCars = new vanillaSelectBox(
"#multiTest",
{
"placeHolder":"Choose up to 3 cars",
"maxSelect":3,
"translations": { "all": "All", "items": "Cars" }
});
Два уровня: просто используйте теги OptGroup, чтобы сделать два уровня
<div>
<label for="dino-select">Choose dinosaurs :</label>
<select id="dino-select" multiple size="3" >
<optgroup label="Theropods">
<option>Tyrannosaurus</option>
<option>Velociraptor</option>
<option>Deinonychus</option>
</optgroup>
<optgroup label="Sauropods">
<option>Diplodocus</option>
<option>Saltasaurus</option>
<option>Apatosaurus</option>
</optgroup>
</select>
</div>
<script>
// How to get the result from the original select tag :
let chosenDinos = [];
function getValues(id) {
let result = [];
let collection = document.querySelectorAll("#" + id + " option");
collection.forEach(function (x) {
if (x.selected) {
result.push(x.value);
}
});
return result;
}
let selectDinos = new vanillaSelectBox("#dino-select",
{"maxHeight": 300,
"search": true,
translations: { "all": "All", "items": "Dinos" }
});
document.getElementById("dino-select").addEventListener("change", function (e) {
chosenDinos = getValues("dino-select");
console.log(chosenDinos);
});
</script>
MAXSELECT Опция: ограничивает количество параметров, которые вы можете выбрать
let selectCars = new vanillaSelectBox("#demoShort",
{"maxSelect": 4,
"maxHeight": 200,
"search": true,
translations: { "all": "All", "items": "Cars" }
});
Макс -стержняя опция: ограничивает ширину вариантов меню, чтобы сделать меню более узким с помощью Ellipis
let selectCars = new vanillaSelectBox("#demoShort",
{"maxOptionWidth":70,
"maxHeight": 200,
"search": true,
translations: { "all": "All", "items": "Cars" }
});
Пример удаленного поиска:
<select id="demoM1" multiple="true" size="3">
</select>
let selectDemoM1 = new vanillaSelectBox("#demoM1",
{
"maxHeight": 300,
"search": true,
"placeHolder" : "search to load more data",
"translations": { "all": "everybody", "items": "people" },
"remote": {
"onSearch": doSearch, // used fro search and init
"onInitSize": 10, // if > 0 onSearch is used for init to populate le select element with the {onInitSize} first elements
}
}
);
function doSearch(what, datasize) {
let valueProperty = "id";
let textProperty = "name";
return new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest();
xhr.overrideMimeType("application/json");
xhr.open('GET','./data.json', true);
xhr.onload = function () {
if (this.status >= 200 && this.status < 300) {
var data = JSON.parse(xhr.response);
if (what == "" && datasize != undefined && datasize > 0) { // for init to show some data
data = data.slice(0, datasize);
data = data.map(function (x) {
return {
value: x[valueProperty],
text: x[textProperty]
}
});
} else {
data = data.filter(function (x) {
let name = x[textProperty].toLowerCase();
if (name.indexOf(what.toLowerCase()) != -1)
return {
value: x[valueProperty],
text: x[textProperty]
}
});
}
resolve(data);
} else {
reject({
status: this.status,
statusText: xhr.statusText
});
}
};
xhr.onerror = function () {
reject({
status: this.status,
statusText: xhr.statusText
});
};
xhr.send();
});
}
