I am using the jQuery Multi-Select to have a "left-to-right" multi select, and I want to add search functionality to this multi select, which is working in the searchable demo using QuickSearch library, but I am not able to get this working, and I get no errors.
I have searched for a more modern solution, since both of the projects are very old, but I have not been able to.
In the below snippet is an example on what I am trying to do.
$('.searchable').multiSelect({
selectableHeader: "<input type='text' class='search-input form-control form-control-sm' autocomplete='off' placeholder='Search..'><br>",
selectionHeader: "<input type='text' class='search-input form-control form-control-sm' autocomplete='off' placeholder='Search..'><br>",
afterInit: function(ms) {
var that = this,
$selectableSearch = that.$selectableUl.prev(),
$selectionSearch = that.$selectionUl.prev(),
selectableSearchString = '#' that.$container.attr('id') ' .ms-elem-selectable:not(.ms-selected)',
selectionSearchString = '#' that.$container.attr('id') ' .ms-elem-selection.ms-selected';
that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
.on('keydown', function(e) {
if (e.which === 40) {
that.$selectableUl.focus();
return false;
}
});
that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
.on('keydown', function(e) {
if (e.which == 40) {
that.$selectionUl.focus();
return false;
}
});
},
afterSelect: function() {
this.qs1.cache();
this.qs2.cache();
},
afterDeselect: function() {
this.qs1.cache();
this.qs2.cache();
}
});
.ms-container {
background: transparent url('../img/switch.png') no-repeat 50% 50%;
}
.ms-container:after {
content: ".";
display: block;
height: 0;
line-height: 0;
font-size: 0;
clear: both;
min-height: 0;
visibility: hidden;
}
.ms-container .ms-selectable,
.ms-container .ms-selection {
background: #fff;
color: #555555;
float: left;
width: 45%;
}
.ms-container .ms-selection {
float: right;
}
.ms-container .ms-list {
/* -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); */
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
/* box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); */
/* -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; */
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-ms-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
border: 1px solid #e4e5ee;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
position: relative;
height: 250px;
padding: 0;
overflow-y: auto;
}
.ms-container .ms-list.ms-focus {
border-color: rgba(66, 80, 165, 0.02);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
outline: 0;
outline: thin dotted \9;
}
.ms-container ul {
margin: 0;
list-style-type: none;
padding: 0;
}
.ms-container .ms-optgroup-container {
width: 100%;
}
.ms-container .ms-optgroup-label {
margin: 0;
padding: 5px 0px 0px 5px;
cursor: pointer;
color: #4b4e68;
}
.ms-container .ms-selectable li.ms-elem-selectable,
.ms-container .ms-selection li.ms-elem-selection {
border-bottom: 1px #eee solid;
padding: 13px 13px;
color: #71748d;
font-size: 14px;
}
.ms-container .ms-selectable li.ms-hover,
.ms-container .ms-selection li.ms-hover {
cursor: pointer;
color: #fff;
text-decoration: none;
background-color: #5969ff;
}
.ms-container .ms-selectable li.disabled,
.ms-container .ms-selection li.disabled {
background-color: #efeff6;
color: #c6c6d3;
cursor: text;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://efp.i-r.dk/js/jquery-quicksearch.js"></script>
<script src="https://efp.i-r.dk/js/jquery.multi-select.js"></script>
<select class="searchable" name="Users" id="Users1" multiple="multiple">
<option value="User1">User1</option>
<option value="User2">User2</option>
<option value="User3">User3</option>
<option value="User4">User4</option>
<option value="User5">User5</option>
</select>
<select class="searchable" name="Users" id="Users2" multiple="multiple">
<option value="User1">User1</option>
<option value="User2">User2</option>
<option value="User3">User3</option>
<option value="User4">User4</option>
<option value="User5">User5</option>
</select>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>
Can any one help find a solution for getting this to work, or maybe point me to a more modern script? .. it is very important for me that the "left-to-right" selection will be done on click of the element, and not clicking on a ekstra button.
CodePudding user response:
Try this:
I've changed the selector:
var that = this,
$selectableSearch = that.$container[0].children[0].children[0],
$selectionSearch = that.$container[0].children[1].children[0],
selectableSearchString = '#' that.$container.attr('id') ' .ms-selectable .ms-elem-selectable:not(.ms-selected)',
selectionSearchString = '#' that.$container.attr('id') ' .ms-selection .ms-elem-selection.ms-selected';
that.qs1 = $($selectableSearch).quicksearch(selectableSearchString)
.on('keydown', function(e) {
if (e.which === 40) {
that.$selectableUl.focus();
return false;
}
});
that.qs2 = $($selectionSearch).quicksearch(selectionSearchString)
.on('keydown', function(e) {
if (e.which == 40) {
that.$selectionUl.focus();
return false;
}
});
Demo
$('.searchable').multiSelect({
selectableHeader: "<input type='text' class='search-input form-control form-control-sm' autocomplete='off' placeholder='Search..'><br>",
selectionHeader: "<input type='text' class='search-input form-control form-control-sm' autocomplete='off' placeholder='Search..'><br>",
afterInit: function(ms) {
var that = this,
$selectableSearch = that.$container[0].children[0].children[0],
$selectionSearch = that.$container[0].children[1].children[0],
selectableSearchString = '#' that.$container.attr('id') ' .ms-selectable .ms-elem-selectable:not(.ms-selected)',
selectionSearchString = '#' that.$container.attr('id') ' .ms-selection .ms-elem-selection.ms-selected';
that.qs1 = $($selectableSearch).quicksearch(selectableSearchString)
.on('keydown', function(e) {
if (e.which === 40) {
that.$selectableUl.focus();
return false;
}
});
that.qs2 = $($selectionSearch).quicksearch(selectionSearchString)
.on('keydown', function(e) {
if (e.which == 40) {
that.$selectionUl.focus();
return false;
}
});
},
afterSelect: function() {
this.qs1.cache();
this.qs2.cache();
},
afterDeselect: function() {
this.qs1.cache();
this.qs2.cache();
}
});
.ms-container {
background: transparent url('../img/switch.png') no-repeat 50% 50%;
}
.ms-container:after {
content: ".";
display: block;
height: 0;
line-height: 0;
font-size: 0;
clear: both;
min-height: 0;
visibility: hidden;
}
.ms-container .ms-selectable,
.ms-container .ms-selection {
background: #fff;
color: #555555;
float: left;
width: 45%;
}
.ms-container .ms-selection {
float: right;
}
.ms-container .ms-list {
/* -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); */
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
/* box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); */
/* -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; */
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-ms-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
border: 1px solid #e4e5ee;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
position: relative;
height: 250px;
padding: 0;
overflow-y: auto;
}
.ms-container .ms-list.ms-focus {
border-color: rgba(66, 80, 165, 0.02);
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
outline: 0;
outline: thin dotted \9;
}
.ms-container ul {
margin: 0;
list-style-type: none;
padding: 0;
}
.ms-container .ms-optgroup-container {
width: 100%;
}
.ms-container .ms-optgroup-label {
margin: 0;
padding: 5px 0px 0px 5px;
cursor: pointer;
color: #4b4e68;
}
.ms-container .ms-selectable li.ms-elem-selectable,
.ms-container .ms-selection li.ms-elem-selection {
border-bottom: 1px #eee solid;
padding: 13px 13px;
color: #71748d;
font-size: 14px;
}
.ms-container .ms-selectable li.ms-hover,
.ms-container .ms-selection li.ms-hover {
cursor: pointer;
color: #fff;
text-decoration: none;
background-color: #5969ff;
}
.ms-container .ms-selectable li.disabled,
.ms-container .ms-selection li.disabled {
background-color: #efeff6;
color: #c6c6d3;
cursor: text;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://efp.i-r.dk/js/jquery-quicksearch.js"></script>
<script src="https://efp.i-r.dk/js/jquery.multi-select.js"></script>
<select class="searchable" name="Users" id="Users1" multiple="multiple">
<option value="User1">User1</option>
<option value="User2">User2</option>
<option value="User3">User3</option>
<option value="User4">User4</option>
<option value="User5">User5</option>
</select>
<select class="searchable" name="Users" id="Users2" multiple="multiple">
<option value="User1">User1</option>
<option value="User2">User2</option>
<option value="User3">User3</option>
<option value="User4">User4</option>
<option value="User5">User5</option>
</select>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>