Skip to content

Instantly share code, notes, and snippets.

@superlloyd

superlloyd/MultiSelect3.html

Last active January 28, 2018 11:17
Show Gist options
  • Save superlloyd/c1ea010a63dade8f3d14948296ac8646 to your computer and use it in GitHub Desktop.
Save superlloyd/c1ea010a63dade8f3d14948296ac8646 to your computer and use it in GitHub Desktop.
Download ZIP
A simple, acceptably good looking, multi-select VueJS (2.0) component, with example
Raw
MultiSelect3.html
<html>
<head>
<title>hello custom multi select</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.js"></script>
<!-- START of SELECT3 -->
<style>
.select3-container {
position: relative;
display: inline-block;
}
.select3-container .select3-input-box {
border: 1px solid #ccc;
background: white;
padding: 0;
margin: 0 1px 1px 0;
display: block;
}
.select3-container .select3-input-text {
border: 0;
padding: 0;
margin: 4px;
/* removed chrome focused border */
outline-style:none;
box-shadow:none;
border-color:transparent;
}
.select3-container .select3-container2 {
position: relative;
display: block;
min-width: 8em;
}
.select3-container .select3-popup {
position: absolute;
display: inline-block;
border: 1px solid #aaa;
background: white;
width: 100%;
top: 0;
z-index:1;
max-height: 12em;
overflow: auto;
}
.select3-container .select3-item {
display: block;
margin: 2px;
padding: 2px;
}
.select3-container .select3-item:hover {
cursor: pointer;
}
.select3-container .select3-selected-item {
display: inline-block;
margin: 1px 0 0 1px;
padding: 1px;
border: 1px solid #ccc;
background: #eee;
border-radius: 4px;
}
.select3-container .select3-selected-item:after {
content: "\d7";
color: #888;
}
.select3-container .select3-selected-item:hover {
cursor: pointer;
}
.select3-container .select3-match-higlight {
background: #afb;
font-weight: bold;
}
</style>
<script type="text/x-template" id="VueTemplate-MultiSelect3">
<div class="select3-container"
v-bind:style="style"
v-on:mousedown="onMouseDown"
v-on:click="onMouseDown"
>
<div class="select3-input-box" ref="inputBox">
<div v-for="item in selection"
class="select3-selected-item"
v-on:click="deselect(item)"
>
{{ getGetter(item) }}
</div>
<input type="text" ref="filter" v-model="filter"
class="select3-input-text"
v-bind:style="textInputStyle"
v-on:focus="isFocus = true"
v-on:blur="onBlur"
v-on:keydown="onKeyDown"
/>
</div>
<div class="select3-container2">
<div class="select3-popup"
v-show="isOpen"
v-bind:style="popupStyle"
ref="popup"
>
<div v-for="item in filtered"
v-bind:style="itemStyle(item)"
ref="popupItems"
class="select3-item"
v-on:click="select(item)"
v-on:mouseenter="higlightedItem = item"
v-html="getHtml(item)"
>
</div>
<!--
IDEA: use dynamic component here: https://vuejs.org/v2/guide/components.html#Dynamic-Components
for custom display.
Not used since getting the string value is important
-->
</div>
</div>
<div>
</script>
<script>
function scrollToVisible(item) {
if (!item)
return;
var popup = item.offsetParent;
if (!popup)
return;
if (item.offsetTop < popup.scrollTop) {
popup.scrollTop = item.offsetTop;
}
else if ((item.offsetTop + item.offsetHeight) > (popup.scrollTop + popup.clientHeight)) {
popup.scrollTop = item.offsetTop + item.offsetHeight - popup.clientHeight;
}
}
Array.prototype.contains = function (x) {
var index = this.indexOf(x);
return index > -1;
}
Vue.component('select3', {
template: '#VueTemplate-MultiSelect3',
props: {
value: { type: Array },
width: { type: String },
items: {
type: Array,
default: [],
},
getText: {
type: [String, Function],
required: true,
},
style: {},
},
data: function() {
return {
isFocus: false,
selection: this.value,
filter: '',
higlightedItem: null,
};
},
computed: {
popupStyle: function() {
var result = { };
if (this.filtered.length == 0)
result.height = '1.5em';
return result;
},
textInputStyle: function() {
var result = { };
var filter = this.filter;
result.width = ((filter.length + 1) * 8) + 'px';
return result;
},
getGetter: function() {
var p = this.getText;
if (typeof p === "string" || p instanceof String) return function(x) { return x[p] || ''; };
//else if (p instanceof Function)
return function(x) { return p(x) || ''; };
},
filtered: function() {
var items = this.items || [];
var filter = (this.filter || '').trim().toLowerCase();
var getter = this.getGetter;
var match = function(x) {
if (filter === '')
return true;
var s = getter(x).toLowerCase();
return s.indexOf(filter) > -1;
};
// PERFORMANCE REMARK: Do NOT use .push() to fill/update filtered array
var result = [];
result.length = items.length;
var len = 0;
for (var i = 0; i < items.length; i++) {
var it = items[i];
if (match(it)) {
result[len++] = it;
}
}
result.length = len;
result.sort(function(a, b) {
var va = getter(a);
var vb = getter(b);
return va.localeCompare(vb);
});
// lastly update highlight
if (result.length > 0) {
if (!this.higlightedItem || result.indexOf(this.higlightedItem) == -1)
this.higlightedItem = result[0];
}
else {
this.higlightedItem = null;
}
return result;
},
isOpen: function() {
return this.isFocus;
},
},
methods: {
onMouseDown: function(e) {
if (e.srcElement == this.$refs.inputBox)
this.$refs.filter.focus();
e.preventDefault();
},
onBlur: function() {
this.isFocus = false;
this.filter = '';
this.higlightedItem = null;
},
itemStyle: function(x) {
var result = { };
if (this.selection && this.selection.indexOf(x) > -1) {
result.cursor = 'default';
if (x == this.higlightedItem) {
result.color = 'white';
result.background = '#ddd';
}
else {
result.color = '#c0c0c0';
}
}
else {
if (x == this.higlightedItem) {
result.background = '#c0e0ff';
}
}
return result;
},
makeVisible: function() {
if (!this.higlightedItem || !this.filtered || !this.$refs.popupItems)
return;
var index = this.filtered.indexOf(this.higlightedItem);
if (index > -1) {
var item = this.$refs.popupItems[index];
scrollToVisible(item);
}
},
getHtml: function(x) {
var text = this.getGetter(x);
var filter = (this.filter || '').trim().toLowerCase();
if (filter === '')
return text;
var index = text.toLowerCase().indexOf(filter);
if (index < 0)
return text;
return text.substr(0, index)
+ "<span class='select3-match-higlight'>"
+ text.substr(index, filter.length)
+ "</span>"
+ text.substr(index + filter.length)
;
},
onKeyDown: function (e) {
var items = this.filtered || [];
if (!items || items.length == 0)
return;
var me = this;
function navigate(inc) {
var current = me.higlightedItem;
var index = items.indexOf(current);
var newindex = index + inc;
if (newindex < 0)
newindex = 0;
if (newindex >= items.length)
newindex = items.length - 1;
if (newindex == index)
return;
me.higlightedItem = items[newindex];
me.makeVisible();
};
var code = (typeof e.which == "number") ? e.which : e.keyCode;
var char = String.fromCharCode(code);
switch (code) {
case 40: // arrow down
navigate(1);
break;
case 34: // page down
navigate(6);
break;
case 38: // arrow up
navigate(-1);
break;
case 33: // page up
navigate(-6);
break;
case 27: // ESC
this.$refs.filter.blur();
break;
case 8: // backspace
if (this.filter)
return;
if (!this.selection || this.selection.length == 0)
return;
this.selection.splice(this.selection.length - 1, 1);
break;
default:
switch (char) {
case '\r':
case '\n':
if (this.select(this.higlightedItem)) {
this.$refs.filter.select();
}
break;
default:
return;
}
break;
}
e.preventDefault();
},
deselect: function(x) {
if (!this.selection)
return;
var index = this.selection.indexOf(x);
if (index > -1)
this.selection.splice(index, 1);
},
select: function(x) {
if (!x)
return false;
if (!this.selection) {
this.selection = [];
this.$emit('input', this.selection);
}
if (!this.selection.contains(x)) {
this.selection.push(x);
return true;
}
else {
return false;
}
},
},
watch: {
value: function (value) {
if (value && !(value instanceof Array)) {
value = null;
this.$emit('input', value);
}
this.selection = value;
},
filtered: function(value) {
var me = this;
setTimeout(function() { me.makeVisible(); });
},
higlightedItem: function(value) {
this.makeVisible();
}
}
});
</script>
<!-- END of SELECT3 -->
</head>
<!-- test code below -->
<body>
<div id="el">
My multi select:
<select3 ref="myMultiselect" v-bind:items="Trucks" get-text="Name" v-model="Selection" style="width:15em">
</select3>
Aloha?
<br/>
<p></p>
Selected Values:
<span v-for="(it, index) in Selection">
{{ index > 0 ? ', ' : '' }}<b>[{{it.ID}}]</b><i>{{it.Name}}</i>
</span>
</div>
<script>
var vm = new Vue({
el: '#el',
data: {
Selection: null,
Trucks:
[
{ ID:1, Name: '105' },
{ ID:2, Name: '462' },
{ ID:3, Name: '463' },
{ ID:4, Name: '464' },
{ ID:5, Name: '465' },
{ ID:6, Name: '466' },
{ ID:7, Name: '467' },
{ ID:8, Name: '468' },
{ ID:9, Name: '469' },
{ ID:10, Name: '481' },
{ ID:11, Name: '482' },
{ ID:12, Name: '483' },
{ ID:13, Name: '484' },
{ ID:14, Name: '485' },
{ ID:15, Name: '486' },
{ ID:16, Name: '487' },
{ ID:17, Name: '488' },
{ ID:18, Name: '489' },
{ ID:19, Name: '470' },
{ ID:20, Name: '471A' },
{ ID:21, Name: '472' },
{ ID:22, Name: '473' },
{ ID:23, Name: '475' },
{ ID:24, Name: '476' },
{ ID:25, Name: '477' },
{ ID:26, Name: '478A' },
{ ID:27, Name: '479' },
{ ID:28, Name: '480' },
{ ID:29, Name: '490' },
{ ID:30, Name: '491' },
{ ID:31, Name: '492' },
{ ID:32, Name: '493' },
{ ID:33, Name: '494' },
{ ID:34, Name: '496' },
{ ID:35, Name: '499' },
{ ID:36, Name: '505' },
{ ID:37, Name: '511' },
{ ID:38, Name: '512' },
{ ID:39, Name: '515' },
{ ID:40, Name: '517' },
{ ID:41, Name: '520' },
{ ID:42, Name: '523' },
{ ID:43, Name: '526' },
{ ID:44, Name: '530EXCL' },
{ ID:45, Name: '531' },
{ ID:46, Name: '541' },
{ ID:47, Name: '563' },
{ ID:48, Name: '564' },
{ ID:49, Name: '566' },
{ ID:50, Name: '568' },
{ ID:51, Name: '569' },
{ ID:52, Name: '570' },
{ ID:53, Name: '571' },
{ ID:54, Name: '573' },
{ ID:55, Name: '574' },
{ ID:56, Name: '575A' },
{ ID:57, Name: '576A' },
{ ID:58, Name: '577' },
{ ID:59, Name: '578' },
{ ID:60, Name: 'AAA' },
{ ID:61, Name: '102' },
{ ID:62, Name: '103' },
{ ID:63, Name: '104' },
{ ID:64, Name: '106' },
{ ID:65, Name: '100D' },
{ ID:66, Name: '102D' },
{ ID:67, Name: '103D' },
{ ID:68, Name: '104D' },
{ ID:69, Name: '106D' },
{ ID:70, Name: 'AF075_BB' },
{ ID:71, Name: 'AF076_BB' },
{ ID:72, Name: 'LK981' },
{ ID:73, Name: 'LK970' },
{ ID:74, Name: 'LK774' },
{ ID:75, Name: 'LK603' },
{ ID:76, Name: 'LK367' },
{ ID:77, Name: 'LK462' },
{ ID:78, Name: 'LK09E' },
{ ID:79, Name: 'LK011' },
{ ID:80, Name: 'LK05E' },
{ ID:81, Name: 'LKR98' },
{ ID:82, Name: 'LK01E' },
{ ID:83, Name: 'LK03E' },
{ ID:84, Name: 'LK094' },
{ ID:85, Name: 'LK243' },
{ ID:86, Name: 'LK02T' },
{ ID:87, Name: 'LK162' },
{ ID:88, Name: 'LK208' },
{ ID:89, Name: 'LL118_BB' },
{ ID:90, Name: 'LL118T' },
{ ID:91, Name: 'JKBULK' },
{ ID:92, Name: 'PATELS' },
{ ID:93, Name: 'SUDAN' },
{ ID:94, Name: 'JK683_BB' },
{ ID:95, Name: 'JK079_BB' },
{ ID:96, Name: 'JK441_BB' },
{ ID:97, Name: 'JK426_BB' },
{ ID:98, Name: 'JK705_BB' },
{ ID:99, Name: 'JK982_BB' },
{ ID:100, Name: 'G207' },
{ ID:101, Name: 'G207D' },
{ ID:102, Name: 'RH077' },
{ ID:103, Name: 'RH077D' },
{ ID:104, Name: 'MD572' },
{ ID:105, Name: 'MD220' },
{ ID:106, Name: 'MD435' },
{ ID:107, Name: 'MD667' },
{ ID:108, Name: 'MD221' },
{ ID:109, Name: 'CTH04' },
{ ID:110, Name: 'KL023' },
{ ID:111, Name: 'KL023D' },
{ ID:112, Name: 'KL037' },
{ ID:113, Name: 'KL037D' },
{ ID:114, Name: 'KL064' },
{ ID:115, Name: 'KL064D' },
{ ID:116, Name: 'KL083' },
{ ID:117, Name: 'KL083D' },
{ ID:118, Name: 'KL116' },
{ ID:119, Name: 'KL116D' },
{ ID:120, Name: 'KL236' },
{ ID:121, Name: 'KL236D' },
{ ID:122, Name: 'KL264' },
{ ID:123, Name: 'KL264D' },
{ ID:124, Name: 'KL426' },
{ ID:125, Name: 'KL426D' },
{ ID:126, Name: 'KL452' },
{ ID:127, Name: 'KL452D' },
{ ID:128, Name: 'KL506' },
{ ID:129, Name: 'KL506D' },
{ ID:130, Name: 'KL524' },
{ ID:131, Name: 'KL524D' },
{ ID:132, Name: 'KL575' },
{ ID:133, Name: 'KL575D' },
{ ID:134, Name: 'KL583' },
{ ID:135, Name: 'KL583D' },
{ ID:136, Name: 'KL707' },
{ ID:137, Name: 'KL707D' },
{ ID:138, Name: 'KL708' },
{ ID:139, Name: 'KL708D' },
{ ID:140, Name: 'KL717' },
{ ID:141, Name: 'KL717D' },
{ ID:142, Name: 'KL829' },
{ ID:143, Name: 'KL829D' },
{ ID:144, Name: 'KL830' },
{ ID:145, Name: 'KL830D' },
{ ID:146, Name: 'KL843' },
{ ID:147, Name: 'KL843D' },
{ ID:148, Name: 'KL867' },
{ ID:149, Name: 'KL867D' },
{ ID:150, Name: 'KL985' },
{ ID:151, Name: 'KL985D' },
{ ID:152, Name: 'KL996' },
{ ID:153, Name: 'KL996D' },
{ ID:154, Name: 'TL779' },
{ ID:155, Name: 'TL779D' },
{ ID:156, Name: 'AJ260' },
{ ID:157, Name: 'AJ260D' },
{ ID:158, Name: 'AJ268' },
{ ID:159, Name: 'AJ268D' },
{ ID:160, Name: 'TRFRCE' },
{ ID:161, Name: 'MH291D' },
{ ID:162, Name: '463Z' },
{ ID:163, Name: '000' },
{ ID:164, Name: '530' },
{ ID:165, Name: '565' },
{ ID:166, Name: '012' },
{ ID:167, Name: '010' },
{ ID:168, Name: '017' },
{ ID:169, Name: '016' },
{ ID:170, Name: '005' },
{ ID:171, Name: '006' },
{ ID:172, Name: '526A' },
{ ID:173, Name: 'AJ320D' },
{ ID:174, Name: 'AJ55D' },
{ ID:175, Name: 'AJ737D' },
{ ID:176, Name: 'AJ404D' },
{ ID:177, Name: 'MD356' },
{ ID:178, Name: 'GJK104' },
{ ID:179, Name: '107' },
{ ID:180, Name: '492Z' },
{ ID:181, Name: '000' },
{ ID:182, Name: '999A' },
{ ID:183, Name: '999' },
{ ID:184, Name: '491A' },
{ ID:185, Name: '003' },
{ ID:186, Name: '004' },
{ ID:187, Name: '007' },
{ ID:188, Name: '011' },
{ ID:189, Name: '018' },
{ ID:190, Name: 'SAWTELLS' },
{ ID:191, Name: '100R&W' },
{ ID:192, Name: '102R&W' },
{ ID:193, Name: '103R&W' },
{ ID:194, Name: '104R&W' },
{ ID:195, Name: '106R&W' },
{ ID:196, Name: 'AF075R&W' },
{ ID:197, Name: 'AF076R&W' },
{ ID:198, Name: 'RH077R&W' },
{ ID:199, Name: 'AF072_BB' },
{ ID:200, Name: 'AF072D' },
{ ID:201, Name: 'AF072R&W' },
{ ID:202, Name: 'CW01' },
{ ID:203, Name: '010' },
{ ID:204, Name: 'CW14' },
{ ID:205, Name: 'CW30' },
{ ID:206, Name: '102BKM' },
{ ID:207, Name: '101BKM' },
{ ID:208, Name: '081BKM' },
{ ID:209, Name: '082BKM' },
{ ID:210, Name: '108' },
{ ID:211, Name: '108D' },
{ ID:212, Name: '103BKM' },
{ ID:213, Name: '108R&W' },
{ ID:214, Name: 'JK079R&W' },
{ ID:215, Name: 'CW05' },
{ ID:216, Name: '520A' },
{ ID:217, Name: '520B' },
{ ID:218, Name: '033' },
{ ID:219, Name: '109' },
{ ID:220, Name: '109D' },
{ ID:221, Name: '110' },
{ ID:222, Name: '110D' },
{ ID:223, Name: '009' },
{ ID:224, Name: '031' },
{ ID:225, Name: '500A' },
{ ID:226, Name: '262' },
{ ID:227, Name: 'LAH788' },
{ ID:228, Name: '460' },
{ ID:229, Name: '461' },
{ ID:230, Name: '012' },
{ ID:231, Name: '053PL' },
{ ID:232, Name: '091PL' },
{ ID:233, Name: 'KL614' },
{ ID:234, Name: 'KL614D' },
{ ID:235, Name: 'KL357' },
{ ID:236, Name: 'KL357D' },
{ ID:237, Name: 'PR01_BB' },
{ ID:238, Name: '213_BB' },
{ ID:239, Name: 'BH255' },
{ ID:240, Name: '579' },
{ ID:241, Name: 'BH255T' },
{ ID:242, Name: '459' },
{ ID:243, Name: 'KL819' },
{ ID:244, Name: 'KL819D' },
{ ID:245, Name: 'KRAUSED' },
{ ID:246, Name: 'HC1' },
{ ID:247, Name: 'HC2' },
{ ID:248, Name: '580' },
{ ID:249, Name: '581' },
{ ID:250, Name: 'MH290D' },
{ ID:251, Name: 'ROB001' },
{ ID:252, Name: 'KL747' },
{ ID:253, Name: 'KL162' },
{ ID:254, Name: 'KL903' },
{ ID:255, Name: 'KL213' },
{ ID:256, Name: 'KL337' },
{ ID:257, Name: 'KL745D' },
{ ID:258, Name: 'BLOCK MISC' },
{ ID:259, Name: 'HF795' },
{ ID:260, Name: 'HF831' },
{ ID:261, Name: 'HF494' },
{ ID:262, Name: '458' },
{ ID:263, Name: 'KL745' },
{ ID:264, Name: '109R&W' },
{ ID:265, Name: 'KL577D' },
{ ID:266, Name: 'KL577' },
{ ID:267, Name: 'CH094' },
{ ID:268, Name: 'CH243' },
{ ID:269, Name: 'CH970' },
{ ID:270, Name: 'CH911' },
{ ID:271, Name: 'CH309' },
{ ID:272, Name: 'RBAJI' },
{ ID:273, Name: 'RBBE5' },
{ ID:274, Name: 'RBZFY' },
{ ID:275, Name: 'RBAR4' },
{ ID:276, Name: 'RBYUX' },
{ ID:277, Name: 'RBAY6' },
{ ID:278, Name: 'RBCAT' },
{ ID:279, Name: 'RBBB4' },
{ ID:280, Name: 'RBAG1' },
{ ID:281, Name: 'RBXGA' },
{ ID:282, Name: 'JB586T' },
{ ID:283, Name: 'BNF011' },
{ ID:284, Name: 'BC001' },
{ ID:285, Name: 'BCBE5' },
{ ID:286, Name: 'BCBB2' },
{ ID:287, Name: 'BCAY6' },
{ ID:288, Name: 'BCAT0' },
{ ID:289, Name: 'BCAP5' },
{ ID:290, Name: 'BCAE3' },
{ ID:291, Name: 'BCAZ6' },
{ ID:292, Name: 'BCBK3' },
{ ID:293, Name: 'CH451' },
{ ID:294, Name: 'RAC1' },
{ ID:295, Name: '001' },
{ ID:296, Name: 'HB776' },
{ ID:297, Name: 'CH550D' },
{ ID:298, Name: 'HC3' },
{ ID:299, Name: '588' },
{ ID:300, Name: '582' },
{ ID:301, Name: '583' },
{ ID:302, Name: '314' },
{ ID:303, Name: '321' },
{ ID:304, Name: '334' },
{ ID:305, Name: 'HT288' },
{ ID:306, Name: 'HT999' },
{ ID:307, Name: 'HT831' },
{ ID:308, Name: 'BR052' },
{ ID:309, Name: 'BR145' },
{ ID:310, Name: 'BR166' },
{ ID:311, Name: 'BR239' },
{ ID:312, Name: 'BR544' },
{ ID:313, Name: 'BR545' },
{ ID:314, Name: 'BR555' },
{ ID:315, Name: 'BR571' },
{ ID:316, Name: 'BR572' },
{ ID:317, Name: 'BR823' },
{ ID:318, Name: 'BR901' },
{ ID:319, Name: 'BR914' },
{ ID:320, Name: 'KL179D' },
{ ID:321, Name: 'KL179' },
{ ID:322, Name: 'CS882D' },
{ ID:323, Name: 'CS882' },
{ ID:324, Name: 'CS896D' },
{ ID:325, Name: 'CS896' },
{ ID:326, Name: 'CS937D' },
{ ID:327, Name: 'CS937' },
{ ID:328, Name: 'MM134' },
{ ID:329, Name: 'MM905' },
{ ID:330, Name: 'MM284' },
{ ID:331, Name: 'MM348' },
{ ID:332, Name: 'MM793' },
{ ID:333, Name: 'MM639' },
{ ID:334, Name: 'MM076' },
{ ID:335, Name: 'MM027' },
{ ID:336, Name: 'MM987' },
{ ID:337, Name: 'MM135' },
{ ID:338, Name: 'MM291' },
{ ID:339, Name: 'MM063' },
{ ID:340, Name: 'MM064D' },
{ ID:341, Name: 'MM635' },
{ ID:342, Name: 'MM105' },
{ ID:343, Name: 'MM135' },
{ ID:344, Name: 'MM291' },
{ ID:345, Name: 'MM063' },
{ ID:346, Name: 'MM105' },
{ ID:347, Name: 'MM240' },
{ ID:348, Name: 'MM005' },
{ ID:349, Name: 'MM606' },
{ ID:350, Name: 'MM409' },
{ ID:351, Name: 'MM638' },
{ ID:352, Name: 'MM637' },
{ ID:353, Name: 'MM926' },
{ ID:354, Name: 'MM992' },
{ ID:355, Name: 'MM819' },
{ ID:356, Name: 'MM487' },
{ ID:357, Name: 'MM986' },
{ ID:358, Name: 'MM865' },
{ ID:359, Name: 'MM011D' },
{ ID:360, Name: 'MM776' },
{ ID:361, Name: 'SW153' },
{ ID:362, Name: 'SW586' },
{ ID:363, Name: 'SW464' },
{ ID:364, Name: 'SW006' },
{ ID:365, Name: 'MH01' },
{ ID:366, Name: 'MH03D' },
{ ID:367, Name: 'MH09D' },
{ ID:368, Name: 'MH05D' },
{ ID:369, Name: 'MH11D' },
{ ID:370, Name: '536' },
{ ID:371, Name: 'FL904' },
{ ID:372, Name: 'FL990' },
{ ID:373, Name: 'HE428T' },
{ ID:374, Name: '537' },
{ ID:375, Name: 'HE428R&W' },
{ ID:376, Name: 'CH774' },
{ ID:377, Name: 'CH285' },
{ ID:378, Name: 'ACH741' },
{ ID:379, Name: 'ACH51' },
{ ID:380, Name: 'ACH120' },
{ ID:381, Name: 'ACH737' },
{ ID:382, Name: 'ACH969' },
{ ID:383, Name: 'SP4229' },
{ ID:384, Name: 'SP4710' },
{ ID:385, Name: 'SP4713' },
{ ID:386, Name: 'SP4145' },
{ ID:387, Name: 'SP4490' },
{ ID:388, Name: 'SP4731' },
{ ID:389, Name: 'SP4345' },
{ ID:390, Name: 'SP4581' },
{ ID:391, Name: 'SP4998' },
{ ID:392, Name: 'CO741' },
{ ID:393, Name: 'HT494' },
{ ID:394, Name: 'MH291' },
{ ID:395, Name: 'HE428' },
{ ID:396, Name: 'SP4487' },
{ ID:397, Name: '350' },
{ ID:398, Name: '340' },
{ ID:399, Name: 'JNB906' },
{ ID:400, Name: 'CH603' },
{ ID:401, Name: 'HE3910' },
{ ID:402, Name: 'HE3910T' },
{ ID:403, Name: 'HE151' },
{ ID:404, Name: 'HE151T' },
{ ID:405, Name: 'HE 151R&W' },
{ ID:406, Name: 'MH13D' },
{ ID:407, Name: '538' },
{ ID:408, Name: '584' },
{ ID:409, Name: '585' },
{ ID:410, Name: '586' },
{ ID:411, Name: '535' },
{ ID:412, Name: '539' },
{ ID:413, Name: 'JB586' },
{ ID:414, Name: 'HT477' },
{ ID:415, Name: 'FL937' },
{ ID:416, Name: 'KL452 R' },
{ ID:417, Name: 'OSS73' },
{ ID:418, Name: 'OSS55' },
{ ID:419, Name: '397PL' },
{ ID:420, Name: '111PL' },
{ ID:421, Name: '958PL' },
{ ID:422, Name: '249ZS' },
{ ID:423, Name: '218ZS' },
{ ID:424, Name: 'FL909' },
{ ID:425, Name: 'FL403' },
{ ID:426, Name: 'FL607' },
{ ID:427, Name: 'FL209' },
{ ID:428, Name: 'FL999' },
{ ID:429, Name: 'CS707D' },
{ ID:430, Name: 'KL416' },
{ ID:431, Name: 'KL416D' },
{ ID:432, Name: 'KL875D' },
{ ID:433, Name: 'MH17D' },
{ ID:434, Name: 'FL940' },
{ ID:435, Name: 'MH19D' },
{ ID:436, Name: 'MD965' },
{ ID:437, Name: 'FL901' },
{ ID:438, Name: 'FL950' },
{ ID:439, Name: 'KL875' },
{ ID:440, Name: 'FL109' },
{ ID:441, Name: '910ZS' },
{ ID:442, Name: 'JB586 R&W' },
{ ID:443, Name: 'EC200' },
{ ID:444, Name: 'BR695' },
{ ID:445, Name: 'CM029' },
{ ID:446, Name: 'CM599' },
{ ID:447, Name: 'BR470' },
{ ID:448, Name: '587' },
{ ID:449, Name: 'BR696' },
{ ID:450, Name: 'SW877_BB' },
{ ID:451, Name: 'BR469' },
{ ID:452, Name: 'MH15D' },
{ ID:453, Name: 'KL863' },
{ ID:454, Name: 'BR471' },
{ ID:455, Name: 'BR460' },
{ ID:456, Name: 'BR468' },
{ ID:457, Name: 'BR699' },
{ ID:458, Name: 'LT475' },
{ ID:459, Name: 'LT887' },
{ ID:460, Name: 'LT617' },
{ ID:461, Name: 'IWS01' },
{ ID:462, Name: 'IWS02' },
{ ID:463, Name: 'IWS03' },
{ ID:464, Name: 'IWS04' },
{ ID:465, Name: 'IWS06' },
{ ID:466, Name: 'AG677' },
{ ID:467, Name: 'AG109' },
{ ID:468, Name: 'AG856' },
{ ID:469, Name: 'AG956' },
{ ID:470, Name: 'AG702' },
{ ID:471, Name: 'AG168' },
{ ID:472, Name: 'AG668' },
{ ID:473, Name: 'TC309' },
{ ID:474, Name: 'QT421' },
{ ID:475, Name: 'QT705' },
{ ID:476, Name: 'KL588D' },
{ ID:477, Name: 'KL558' },
{ ID:478, Name: '106_BB' },
{ ID:479, Name: 'AF072D_S' },
{ ID:480, Name: 'AF075_S' },
{ ID:481, Name: '100D_S' },
{ ID:482, Name: '103_BB' },
{ ID:483, Name: '104D_S' },
{ ID:484, Name: '106D_S' },
{ ID:485, Name: '108_BB' },
{ ID:486, Name: '109D_S' },
{ ID:487, Name: '110D_S' },
{ ID:488, Name: 'JK079_S' },
{ ID:489, Name: 'JK426_S' },
{ ID:490, Name: 'KL023_BB' },
{ ID:491, Name: 'KL064D_S' },
{ ID:492, Name: 'KL577D_S' },
{ ID:493, Name: 'KL843D_S' },
{ ID:494, Name: 'AJ260_S' },
{ ID:495, Name: 'AJ260D_S' },
{ ID:496, Name: 'JB586T_S' },
{ ID:497, Name: 'HT288_S' },
{ ID:498, Name: 'HT477_S' },
{ ID:499, Name: 'HT831_S' },
{ ID:500, Name: 'MH09_S' },
{ ID:501, Name: 'HE151_S' },
{ ID:502, Name: 'HE428T_S' },
{ ID:503, Name: 'SW877_S' },
{ ID:504, Name: 'QT886' },
{ ID:505, Name: 'QT810' },
{ ID:506, Name: '532' },
{ ID:507, Name: 'DN333D' },
{ ID:508, Name: 'SEBY33' },
{ ID:509, Name: 'SEBY33D' },
{ ID:510, Name: 'SEBY38' },
{ ID:511, Name: 'SEBY38D' },
{ ID:512, Name: 'SECB88' },
{ ID:513, Name: 'SECB88D' },
{ ID:514, Name: 'SEBY33_S' },
{ ID:515, Name: 'SEBY38_S' },
{ ID:516, Name: 'SECB88_S' },
{ ID:517, Name: '533' },
{ ID:518, Name: 'GN000' },
{ ID:519, Name: 'NL000' },
{ ID:520, Name: 'DN333' },
{ ID:521, Name: 'BG000' },
{ ID:522, Name: 'MG000' },
{ ID:523, Name: 'TG280_BB' },
{ ID:524, Name: 'TG280_S' },
{ ID:525, Name: '534' },
{ ID:526, Name: 'TG280D_S' },
{ ID:527, Name: 'GN000B' },
{ ID:528, Name: 'KRAUSE_S' },
{ ID:529, Name: '724NW' },
{ ID:530, Name: '540' },
{ ID:531, Name: 'W000_S' },
{ ID:532, Name: 'W000' },
{ ID:533, Name: '589' },
{ ID:534, Name: '590' },
{ ID:535, Name: '457' },
{ ID:536, Name: 'W466D_S' },
{ ID:537, Name: 'W466D' },
{ ID:538, Name: 'W388D_S' },
{ ID:539, Name: 'W388D' },
{ ID:540, Name: 'W237D_S' },
{ ID:541, Name: 'W237D' },
{ ID:542, Name: 'W414D_S' },
{ ID:543, Name: 'W414D' },
{ ID:544, Name: 'W216D_S' },
{ ID:545, Name: 'W216D' },
{ ID:546, Name: 'W034D_S' },
{ ID:547, Name: 'W034D' },
{ ID:548, Name: 'W391_S' },
{ ID:549, Name: 'W391_BB' },
{ ID:550, Name: 'W775D_S' },
{ ID:551, Name: 'W775_BB' },
{ ID:552, Name: 'W512D_S' },
{ ID:553, Name: 'W512D' },
{ ID:554, Name: 'W288D_S' },
{ ID:555, Name: 'W288D' },
{ ID:556, Name: 'W288_S' },
{ ID:557, Name: 'W288_BB' },
{ ID:558, Name: 'W688D_S' },
{ ID:559, Name: 'W688_S' },
{ ID:560, Name: 'W688_BB' },
{ ID:561, Name: 'W688D' },
{ ID:562, Name: 'W689D' },
{ ID:563, Name: 'W689D_S' },
{ ID:564, Name: 'W109D_S' },
{ ID:565, Name: 'W109D' },
{ ID:566, Name: 'W162_BB' },
{ ID:567, Name: 'W162_S' },
{ ID:568, Name: 'W775_S' },
{ ID:569, Name: 'W775D' },
{ ID:570, Name: 'W595D' },
{ ID:571, Name: 'W595D_S' },
{ ID:572, Name: 'W508_S' },
{ ID:573, Name: 'W508_BB' },
{ ID:574, Name: 'W373_S' },
{ ID:575, Name: 'W373_BB' },
{ ID:576, Name: 'W414_BB' },
{ ID:577, Name: 'W414_S' },
{ ID:578, Name: 'W903_S' },
{ ID:579, Name: 'W903_BB' },
{ ID:580, Name: 'W604_S' },
{ ID:581, Name: 'W604_BB' },
{ ID:582, Name: 'W039_S' },
{ ID:583, Name: 'W039_BB' },
{ ID:584, Name: 'W474_S' },
{ ID:585, Name: 'W474_BB' },
{ ID:586, Name: 'WJBH_S' },
{ ID:587, Name: 'WJBH_BB' },
{ ID:588, Name: 'W805_S' },
{ ID:589, Name: 'W805_BB' },
{ ID:590, Name: 'W213_S' },
{ ID:591, Name: 'W283_S' },
{ ID:592, Name: 'W283_BB' },
{ ID:593, Name: 'W582_S' },
{ ID:594, Name: 'W582_BB' },
{ ID:595, Name: 'W449_S' },
{ ID:596, Name: 'W449_BB' },
{ ID:597, Name: '591' },
{ ID:598, Name: 'W819_S' },
{ ID:599, Name: 'W819_BB' },
{ ID:600, Name: 'W118_S' },
{ ID:601, Name: 'W118_BB' },
{ ID:602, Name: 'TC309D_S' },
{ ID:603, Name: 'KL162_BB' },
{ ID:604, Name: '456' },
{ ID:605, Name: 'RE000' },
{ ID:606, Name: 'RE000D' },
{ ID:607, Name: 'KL588' },
{ ID:608, Name: 'KL558D' },
{ ID:609, Name: 'WBH000' },
{ ID:610, Name: 'TC696' },
{ ID:611, Name: 'SQ970D' },
{ ID:612, Name: 'SQ970' },
{ ID:613, Name: 'TT478_BB' },
{ ID:614, Name: 'TT478D' },
{ ID:615, Name: '592' },
{ ID:616, Name: '593' },
{ ID:617, Name: '576' },
{ ID:618, Name: 'TE449' },
{ ID:619, Name: 'TE273' },
{ ID:620, Name: 'TE743' },
{ ID:621, Name: 'TE744' },
{ ID:622, Name: 'TE450' },
{ ID:623, Name: 'LS599' },
{ ID:624, Name: 'LS447' },
{ ID:625, Name: 'LS394' },
{ ID:626, Name: 'LS632' },
{ ID:627, Name: 'LS075' },
{ ID:628, Name: 'LS563' },
{ ID:629, Name: 'LS162' },
{ ID:630, Name: 'BS132_BB' },
{ ID:631, Name: 'BS789' },
{ ID:632, Name: 'TC496' },
{ ID:633, Name: 'RT591' },
{ ID:634, Name: 'RT591D' },
{ ID:635, Name: 'RT015' },
{ ID:636, Name: 'RT015D' },
{ ID:637, Name: 'RT847' },
{ ID:638, Name: 'RT847D' },
{ ID:639, Name: 'W512_BB' },
{ ID:640, Name: '111D' },
{ ID:641, Name: 'RT132_BB' },
{ ID:642, Name: 'RT132D' },
{ ID:643, Name: 'BJ767' },
{ ID:644, Name: 'BJ767T' },
{ ID:645, Name: 'MG001' },
{ ID:646, Name: 'KL413' },
{ ID:647, Name: 'KL413D' },
{ ID:648, Name: 'LS912_BB' },
{ ID:649, Name: 'LS766_BB' },
{ ID:650, Name: '471' },
{ ID:651, Name: 'TB000' },
{ ID:652, Name: 'TB001' },
{ ID:653, Name: 'TB275' },
{ ID:654, Name: 'VT029' },
{ ID:655, Name: 'VT700' },
{ ID:656, Name: '478' },
{ ID:657, Name: '453' },
{ ID:658, Name: '454' },
{ ID:659, Name: '455' },
{ ID:660, Name: 'KL982_BB' },
{ ID:661, Name: 'HE428_BB' },
{ ID:662, Name: 'KL213_BB' },
{ ID:663, Name: 'KL583_BB' },
{ ID:664, Name: 'KL708_BB' },
{ ID:665, Name: 'KL819_BB' },
{ ID:666, Name: 'KL829_BB' },
{ ID:667, Name: 'KL830_BB' },
{ ID:668, Name: 'KL843_BB' },
{ ID:669, Name: 'KL903_BB' },
{ ID:670, Name: 'EB000' },
{ ID:671, Name: '594' },
{ ID:672, Name: 'KL985_BB' },
{ ID:673, Name: '535A' },
{ ID:674, Name: 'KL855D' },
{ ID:675, Name: 'KL875_BB' },
{ ID:676, Name: 'KL855_BB' },
{ ID:677, Name: 'FL919' },
{ ID:678, Name: 'KL736D' },
{ ID:679, Name: 'KL736_BB' },
{ ID:680, Name: 'KL736' },
{ ID:681, Name: '100_BB' },
{ ID:682, Name: '100' },
{ ID:683, Name: 'JH031' },
{ ID:684, Name: 'TH000' },
{ ID:685, Name: 'DE000' },
{ ID:686, Name: 'DS768' },
{ ID:687, Name: 'DS481' },
{ ID:688, Name: 'DS738' },
{ ID:689, Name: 'DS725' },
{ ID:690, Name: 'DS621' },
{ ID:691, Name: 'DS905' },
{ ID:692, Name: 'DS326' },
{ ID:693, Name: 'DS616' },
{ ID:694, Name: 'JK940_BB' },
{ ID:695, Name: 'JK868_BB' },
{ ID:696, Name: 'JK802_BB' },
{ ID:697, Name: 'VT029_BB' },
{ ID:698, Name: 'VT700_BB' },
{ ID:699, Name: 'D738_BB' },
{ ID:700, Name: 'HT706' },
{ ID:701, Name: 'AG922' },
{ ID:702, Name: 'WA151T' },
{ ID:703, Name: 'WA151' },
{ ID:704, Name: 'RG384D' },
{ ID:705, Name: 'RG384_BB' },
{ ID:706, Name: 'JK443_BB' },
{ ID:707, Name: 'JK372_BB' },
{ ID:708, Name: '615ZS' },
{ ID:709, Name: '489ZS' },
{ ID:710, Name: 'TC891' },
{ ID:711, Name: 'MH11' },
{ ID:712, Name: '500' },
{ ID:713, Name: 'JK636_BB' },
{ ID:714, Name: 'KL470' },
{ ID:715, Name: 'KL470D' },
{ ID:716, Name: '111_BB' },
{ ID:717, Name: 'KL452_BB' },
{ ID:718, Name: 'KL416_BB' },
{ ID:719, Name: 'KRAUSE' },
{ ID:720, Name: 'KL064_BB' },
{ ID:721, Name: 'MH13' },
{ ID:722, Name: 'HT040' },
{ ID:723, Name: 'MH09' },
{ ID:724, Name: 'MH19' },
{ ID:725, Name: '112' },
{ ID:726, Name: '113' },
{ ID:727, Name: 'KL855' },
{ ID:728, Name: 'CH550' },
{ ID:729, Name: 'KL470_BB' },
{ ID:730, Name: 'KL506_BB' },
{ ID:731, Name: 'DH948D' },
{ ID:732, Name: 'DH870D' },
{ ID:733, Name: 'ST120D' },
{ ID:734, Name: 'BG385D' },
{ ID:735, Name: 'BG752D' },
{ ID:736, Name: '595' },
{ ID:737, Name: 'MT882_BB' },
{ ID:738, Name: 'C733D' },
{ ID:739, Name: 'C068D' },
{ ID:740, Name: 'C390D' },
{ ID:741, Name: 'C895D' },
{ ID:742, Name: '575' },
{ ID:743, Name: 'AJ404' }
]
}
})
vm.$refs.myMultiselect.select({ ID: -1, Name: "Ahahaha" });
</script>
</body>
</html>
@Makazy
Copy link

Makazy commented Mar 23, 2017

On line 225 I would changed

		onMouseDown: function(e) {
			if (e.srcElement == this.$refs.inputBox)
				this.$refs.filter.focus();
			e.preventDefault();
		},

for

		onMouseDown: function(e) {
                        var target = e.target | e.srcElement;
			if (target == this.$refs.inputBox)
				this.$refs.filter.focus();
			e.preventDefault();
		},

or it doesn't work on Firefox (52)
https://developer.mozilla.org/fr/docs/Web/API/Event/srcElement
https://developer.mozilla.org/fr/docs/Web/API/Event/target

@victoriasr
Copy link

victoriasr commented Sep 7, 2017 •
edited
Loading

Hi ! Thank you so much for this example but I'm trying to use it with my database ( with axios), I have different applications related to different countries but sometimes 2 apps have the same country. And I would like, when I search for 1 country to show theme both. Do you know how can I do that?

If you can help me thank you so much !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment