ฉันต้องการให้รายการแบบเลื่อนลงพร้อมชุดของค่า แต่ยังอนุญาตให้ผู้ใช้ "เลือก" ค่าใหม่ที่ไม่มีอยู่ในรายการนั้น
ฉันเห็นว่าselect2รองรับสิ่งนี้หากคุณใช้งานในtags
โหมด แต่มีวิธีทำได้โดยไม่ต้องใช้แท็กหรือไม่?
ฉันต้องการให้รายการแบบเลื่อนลงพร้อมชุดของค่า แต่ยังอนุญาตให้ผู้ใช้ "เลือก" ค่าใหม่ที่ไม่มีอยู่ในรายการนั้น
ฉันเห็นว่าselect2รองรับสิ่งนี้หากคุณใช้งานในtags
โหมด แต่มีวิธีทำได้โดยไม่ต้องใช้แท็กหรือไม่?
คำตอบ:
สำหรับเวอร์ชัน 4+ ตรวจสอบคำตอบด้านล่างโดยKevin Brown
ใน 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งานสำหรับ Select2 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 รหัสซอลจากความคิดเห็นของเขา
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
Improvent ในคำตอบ @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
ฉันเพิ่งสะดุดสิ่งนี้จาก Kevin Brown 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]'};
}
},
});