So I needed to change the bootstrap duallist plugin so the filter would display the most relevant options first from typed keywords. The filtered options are then highlighted within the box (it will colour of the text is based on its relevance etc.)
It works fine up until I want to select options and place them into the selected box. I tried using jquery to add the 'selected' attribute once the options have been clicked.
var nonselectedBox = $("#bootstrap-duallistbox-nonselected-list_bundle")
nonselectedBox.find("option[value='" + $(this).text() + "']")
So there was multiple problems with this code
var nonselectedBox = $("#bootstrap-duallistbox-nonselected-list_bundle")needed to be
nonselectedBox.find("option").removeAttr("selected");completely ruins this plugins interactions. Once this command was executed I found the plugin could not be updated whatsoever.
That said I have decided to drop using this plugin altogether and write my own. The duallist is only meant for a single purpose therefore makes it quite hard to customise.
Also the amount of results needed to filter on seems to be much larger than what it can handle. The efficiency of destroying and recreating the 'display' multiple selects is utterly horrible and freezes Internet Explorer for 5 seconds every time options are filtered, selected and deselected.