vanillaSelectBox
1.0.0
npm i vanillaselectbox
หากคุณเลือกองค์ประกอบทั้งหมดเมื่อรายการถูกกรองโดยกล่องข้อความมันจะนำค่าทั้งหมดไปยังตัวยึดตำแหน่งแม้ว่าจะไม่มีค่าทั้งหมดที่เลือกหากคุณปิดและเปิดอีกครั้งคุณจะสังเกตเห็นว่าไม่มีการตรวจสอบค่าทั้งหมด
แนวคิดคือการใช้องค์ประกอบทางโลกที่เลือกซ่อนไว้และให้แบบเลื่อนลงที่ดีแทน แต่ข้อมูลมาจากองค์ประกอบดั้งเดิมและข้อมูลนี้ได้รับการอัปเดตด้วยตัวเลือกที่ทำและยังคงได้รับเหตุการณ์การเปลี่ยนแปลง ข้อยกเว้นคือรีโมท init () และฟังก์ชั่นการค้นหาระยะไกล () (ไม่บังคับ) เพิ่มด้วย 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 () fonction ใหม่เพื่อรับค่าที่เลือกในอาร์เรย์
v1.02: การเพิ่ม 2 ตัวเลือกใหม่ "itemsSeparator" เพื่อเปลี่ยนค่าเริ่มต้น "," ตัวคั่นรายการที่แสดงในปุ่มและการแปลรายการเพื่อแสดงรายการเป็นเอกเทศหากมีเพียงหนึ่งเดียว
v1.01: การลบรหัสที่ไร้ประโยชน์ 550,551 ฉบับที่ 71 โดย Chchch
v1.00: เนื่องจากความต้องการ: เพิ่มไฟล์ package.json และเปลี่ยนเป็น 1.0.0 เพื่อเตรียมการอัปโหลดไปยัง NPM
v0.78: หยุดใช้สไตล์อินไลน์ในปุ่มหลัก คุณสามารถขโมยการใช้งาน KeepinlineStyles: จริงที่จะใช้พฤติกรรมมรดก
v0.77: ทำงานกับผู้ถือสถานที่ด้วย bastoune help => ยังคงดูเหมือนว่าจะสูญเสียมูลค่าตัวยึดตำแหน่งในการตรวจสอบแบบเลื่อนลงหลายรายการ
v0.76: ความเป็นไปได้ที่จะเปลี่ยนแผนผังแบบเลื่อนลงและเปลี่ยนฟังก์ชั่นการค้นหาระยะไกล + การแก้ไขฟังก์ชันว่างเปล่า ()
v0.75: การค้นหาระยะไกลพร้อมการปรับเปลี่ยนการค้นหาในพื้นที่: เมื่อตรวจสอบ OptGroup ตรวจสอบเด็ก ๆ เฉพาะในกรณีที่พวกเขาไม่ได้แยกออกจากการค้นหา
v0.72: การค้นหาระยะไกล (WIP) Bugfix [x] เลือกทั้งหมดที่ซ้ำกัน
v0.71: การค้นหาระยะไกล (WIP) รหัสที่ดีกว่า => ฟังก์ชั่นผู้ใช้การค้นหาระยะไกลต้องส่งคืนสัญญา
V0.70: การค้นหาระยะไกล (WIP) สามารถทดสอบได้ ทำงานเฉพาะในเมนูระดับ 1 (ไม่ใช่ OptGroups)
v0.65: สองระดับ: การแก้ไขข้อผิดพลาด: กลุ่มได้รับการตรวจสอบ/ไม่ถูกตรวจสอบเมื่อตรวจสอบทั้งหมด/ยกเลิกการเลือกทั้งหมดถูกคลิก
v0.64: สองระดับ: ขณะนี้กลุ่มสามารถตรวจสอบ/ยกเลิกการเลือกตัวเลือกเด็ก ๆ
v0.63: สองระดับ: คลิกเดียวที่กลุ่มเลือก / unselects เด็ก
v0.62: ตัวเลือกใหม่: MaxoptionWidth ตั้งค่าความกว้างสูงสุดสำหรับแต่ละตัวเลือกสำหรับเมนูแคบ (Ellipsis troncature)
v0.61: ตัวเลือกใหม่: MaxSelect, ตั้งค่าสูงสุดเป็นตัวเลือกที่เลือกได้ในเมนูแบบปรนัยหลายตัวเลือก
V0.60: สองระดับ: OptGroups ถูกใช้เพื่อแสดงการเลื่อนลงสองระดับ
v0.59: การแก้ไขข้อผิดพลาด: กล่องค้นหาซ้อนทับรายการแรกในการเลือกเดียว
v0.58: แก้ไขข้อบกพร่อง
v0.57: การแก้ไขข้อผิดพลาด (ตัวเลือก minwidth ไม่ได้รับเกียรติ)
V0.56: ช่องทำเครื่องหมายหลายแบบเลือกมีขนาดเล็กกว่าเล็กน้อยตัวเลือก MaxWidth กำลังทำงานอยู่ + เพิ่มตัวเลือก minwidth และปุ่มตอนนี้มีแอตทริบิวต์สไตล์เพื่อป้องกันลักษณะที่ปรากฏของมัน
v0.55: แอตทริบิวต์ทั้งหมดจากตัวเลือกการเลือกดั้งเดิมจะถูกคัดลอกไปยังองค์ประกอบ SelectBox ยกเว้น => "เลือก", "ปิดใช้งาน", "ข้อความข้อมูล", "ค่าข้อมูล", "Style"
V0.54: หากผู้ใช้เลือกตัวเลือกทั้งหมดของตัวเลือกถูกเลือกโดยผู้ใช้แล้วช่องทำเครื่องหมายทั้งหมดจะถูกตรวจสอบ
v0.53: หากเลือกตัวเลือกทั้งหมดของตัวเลือกที่เลือกไว้แล้วช่องทำเครื่องหมายตรวจสอบทั้งหมดจะถูกตรวจสอบ => ดูตัวอย่าง "เลือกการทดสอบทั้งหมด"
v0.52: การสนับสนุนที่ดีกว่าของการเลือก ('all') => คำสั่งสอดคล้องกับช่องทำเครื่องหมายและเลือก / ยกเลิกการเลือกในขณะที่ค้นหาเลือก / ยกเลิกการเลือกเฉพาะรายการที่พบ
v0.51: การแปลสำหรับเลือกทั้งหมด/ล้างทั้งหมด + การแก้ไข CSS ทั้งหมด + ไม่เลือกรายการที่ปิดใช้งาน
v0.50: PR โดย https://github.com/jaguerra2017 การเพิ่มปุ่มตรวจสอบทั้งหมด/ล้างทั้งหมด + การสนับสนุน OptGroup!
V 0.41: แก้ไขข้อผิดพลาดเนื้อหาเมนูจะถูกวางผิดที่หากการแปลง CSS ถูกนำไปใช้กับพาเรนต์
v 0.40: คลิกที่หนึ่ง selectbox ปิดกล่องอื่นที่เปิด
V 0.35: คุณสามารถเปิดใช้งานและปิดการใช้งานรายการ ตัวเลือกที่แยกออกไปแล้วของตัวเลือกยังใช้ในเวลาเริ่มต้น
V 0.30: เมนูหยุดเคลื่อนที่ไปรอบ ๆ บนหน้าต่างปรับขนาดและเลื่อน + z-index ตามลำดับการสร้างสำหรับหลาย ๆ อินสแตนซ์
v 0.26: ข้อผิดพลาดที่แก้ไขในโหมด Stayopen ด้วยฟังก์ชั่น disable ()
V 0.25: ตัวเลือกใหม่ StayOpen และ Dropbox ไม่ได้เป็น Dropbox อีกต่อไป
V 0.22: การย้ายฟังก์ชันไปยัง Prototype VanillaselectBox => หลายกรณีของ VanillaselectBox () แต่มีฟังก์ชั่น 1 ชุดในหน่วยความจำ
V 0.21: IE 11 เข้ากันได้
V 0.20: ใช้งาน SelectBox ทั้งตัวเลือกเดี่ยวและหลายตัวเลือกด้วยกล่องค้นหา!
V 0.10: ปลั๊กอินที่ใช้งานได้สำหรับทั้งการเลือกแบบเดี่ยวและหลายรายการโดยไม่ต้องใช้กล่องค้นหาในขณะนี้
V 0.02: เพิ่มเหตุการณ์การเปลี่ยนการจัดส่งเพื่อเลือกเครื่องหมายตรวจสอบที่ดีกว่า
V 0.01: การประชุมครั้งแรก => พื้นฐานสำหรับกล่องเลือกเดียว + DOM ได้รับการทำความสะอาดหากคุณเริ่มต้นสองครั้ง
เมนูเลือกเดียว:
<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" }
});
ตัวเลือก MaxOptionWidth: จำกัดความกว้างของตัวเลือกเมนูเพื่อให้เมนูแคบขึ้นโดยใช้วงรี
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();
});
}
