My question has the same goal as jQuery Multiselect - Select All and with Filtered Search and is almost exactly the same; however, the reason I feel that it is not an actual duplicate is that I can't get the Select All and Deselect All Public Methods to work. It seems to only change "http://localhost:51918/Circuits_View?SQL=Select%20%2A%20from%20Circuits_View%20order%20by%20CIRCUIT%3B" to "http://localhost:51918/Circuits_View?SQL=Select%20%2A%20from%20Circuits_View%20order%20by%20CIRCUIT%3B#" (only adding the '#' at the end of the link.
I also am using using the jQuery MultiSelect Plugin: http://loudev.com, and quicksearch.js for the search utility. However, my differences are that I am using Visual Studio 2019, with an MVC Razor page, and jquery-3.5.1.min.js.
My .cshtml code is listed below; up until the "table" display.
@model IEnumerable<Mvc.Models.Circuits_View>
@using Mvc.Variables;
@{
ViewBag.Title = "Index";
<link href="~/Content/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="~/Content/multi-select.css" rel="stylesheet" type="text/css" />
}
<h3>
Circuits - @DateTime.Now.ToString()
</h3>
<body>
<select multiple="multiple" id="my-select" name="my-select[]">
<option value='cheese'>Cheese</option>
<option value='beef'>Beef</option>
<option value='bacon'>Bacon</option>
<option value='sausage'>Sausage</option>
<option value='mushrooms'>Mushrooms</option>
<option value='ham'>Ham</option>
<option value='sauce'>Sauce</option>
<option value='handtossed'>Handtossed</option>
</select>
<script src="~/Scripts/jquery-3.5.1.min.js" type="text/javascript"></script>
<script src="~/Scripts/bootstrap.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.quicksearch.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.multi-select.js" type="text/javascript"></script>
<script type="text/javascript">
// run multiSelect
$('#my-select').multiSelect({
keepOrder: true,
selectableHeader: "<div><a href='#' id='select-all'>Select All</a></div><input type='text' class='search-input' autocomplete='off' placeholder='Selection Circuit Search'>",
selectionHeader: "<div><a href='#' id='deselect-all'>Deselect All</a></div><input type='text' class='search-input' autocomplete='off' placeholder='Selected Circuit Search'>",
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();
}
});
$('#select-all').on('click', function () {
$('#my-select').multiSelect('select_all');
return false;
});
$('#deselect-all').on('click', function () {
$('#my-select').multiSelect('deselect_all');
return false;
});
</script>
I have tried using the original coding format of
$('#select-all').click(function () {
$('#my-select').multiSelect('select_all');
return false;
});
as well as @tmarois 's coding format of using ".on" which was said to be working.
$('#select-all').on('click', function () {
$('#my-select').multiSelect('select_all');
return false;
});
Once this part is working, I will then need to bind it to the database producing the table display, and will also have to have the table display details based on the order in which the selected/selection list's values were entered.
This is as far as my research has been able to get me.
Update: @Arbin Shrestha is this what you meant;(which didn't work)? But shouldn't '#select-all' have already been able to find '#my-select' since it was already initialized? (I tried having the href(s) both above the "select" build and inside the "selectableHeader:" as a division.)
<script type="text/javascript">
// run multiSelect
$('#my-select').multiSelect({
keepOrder: true,
selectableHeader: "<div><a href='#' id='select-all'>Select All</a></div><input type='text' class='search-input' autocomplete='off' placeholder='Selection Circuit Search'>",
selectionHeader: "<div><a href='#' id='deselect-all'>Deselect All</a></div><input type='text' class='search-input' autocomplete='off' placeholder='Selected Circuit Search'>",
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();
}
},
function () {
$('#select-all').click(function () {
$('#my-select').multiSelect('select_all');
return false;
});
},
function () {
$('#deselect-all').click(function () {
$('#my-select').multiSelect('deselect_all');
return false;
});
}
);
</script>
I finally thought to check the view source code on a working page to see how it was working. Not claiming to fully understand it, but here is the code that is allowing it to work.
<script type="text/javascript">
// run multiSelect
(function ($) {
$(function () {
$('.multiselect').multiSelect({});
$('#my-select').multiSelect(
{
keepOrder: true,
selectableHeader: "<input type='text' class='search-input' autocomplete='off' placeholder='Selection Circuit Search'>",
selectionHeader: "<input type='text' class='search-input' autocomplete='off' placeholder='Selected Circuit Search'>",
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();
}
});
$('#select-all').click(function ()
{
$('#my-select').multiSelect('select_all');
return false;
});
$('#deselect-all').click(function ()
{
$('#my-select').multiSelect('deselect_all');
return false;
});
});
}) (jQuery);
</script>