pbauerochse/searchable-option-list

a jquery plugin for a searchable optionlist

Searchable Option List

Searchable Option List (SOL) is a jQuery plugin which enhances your <select> HTML elements and makes the options searchable. It works for regular option lists as well as those marked as multiple.

Documentation

The documentation is available on the github project page

searchable-option-list's Issues

Setting a combined target container for the display items

Setting a target container for the selected display items via configuration would allow having a single selected elements "cloud" for more than one element.

Example: SOL A has 5 elements selected, SOL B has 2 elements selected

Right now A would display 5 elements above itself, B would show 2. If both were set to display their results in div#myResults the div#myResults would contain all 7 elements combined

Swap the position of .sol-current-selection and .sol-inner-container

It is truly an amazing plugin and thanks for contributing to the open source community with this idea.

I am trying to find an option to have the current selection displayed under the inner container. I think it would be nice to have the dropdown as a fixed item and it grows below the selection box. Right now, if I select more options, it pushes the dropdown to go further below.

Please advise.

Thank you!

dropdown won't close when item selected

If you have a single selection SOL and you click an item the dropdown won't close. Needs an extra click to close it.

Invalid item type found undefined Error

$(function () {
    $('#my-select').searchableOptionList({
        data: function () {
            var a = document.getElementById("<%= hfjsonstring.ClientID %>").value;
            alert(a);
            return a;
        }
    });
});

I just take your sample SOL format data as "JSON" format in server side and changed as String format assigned to hidden field and that format assigned into client side variable "a" that SOL JSON format also coming correctly and also i returned my variable in this script, but its showing the error "Invalid item type found undefined".

searchable-option-list : select box will take time to load when loading the page

Firstly i would like to say thank you to ur team for this wonderful plugin......

When em using if i reload the page , multi select box will take time to load(it is showing all inner body i mean it is collapsing the box). Can u please assist me how i can overcome from this issue.

Select options/items programmatically[Feature request]

SOL is working really well. I would suggest SOL provide "Select" method for programmers to select options/items programmatically and SOL automatically updates the UI, the "quickDelete" buttons specifically.

show-selection-container is not Customizable [ Feature Request ]

There should be option for customizing the show-selection-container, the only customization which I have seen is to show selected items below search placeholder or above that. But there should be option either to hide that 'show-selection-container' part or to change the css completely.

"Select all" but only for filtered items

Is there a way to select all items that are matching the filter. And if not, how hard do you think is it to implement this feature.

example in section "Proper positioning of the option popup" doesn't work

Hi,
the example in section "Proper positioning of the option popup" of page http://pbauerochse.github.io/searchable-option-list/examples.html doesn't work (using Firefox 45.0).

Thierry.

Mixed content stops example page from rendering.

Mixed Content: The page at 'https://pbauerochse.github.io/searchable-option-list/examples.html' was loaded over HTTPS, but requested an insecure stylesheet 'http://fonts.googleapis.com/css?family=Open+Sans'. This request has been blocked; the content must be served over HTTPS.

Switching the CDN links to HTTPS will resolve.

how could drop up move to drop down when I click?

i have added all the file but when I click on input button the results show up side and I want it show like dropdown

sol works great in android but doesnt position properly on ios

Thanks this works awesome on android however it doesn't position itself correctly on ios is there something i am missing i am still very new to this programming stuff
the results box sometimes is off screen and sometimes it covers the input box
update this only happens when one has been selected and you attempt to select another item

How can Dynamically updates options

Hi,

Is there any option to update the list of options. I mean we have to update the options dynamically.
if not then how we can destroy and re-initialize?

Input doesn't line up - play nice with Bootstrap?

I'm trying to use your awesome Multi-Select (one of the best I've seen). I'm having an issue with the .sol-input-container input[type="text"] not staying contained in the .sol-input-container, it hangs both in and out of the .sol-input-container. I've tried a number of css techniques but have not been able to find the fix. I'm using Rails and Bootstrap. Would you have any suggestions as to why this is occurring and a solution? Does it not play nice with Bootstrap or is there a way I'm missing to style the .sol-input-container?

Thank you

Make popup always visible.

Is there a way to make a popup always shown without onclick command?
There's a size attribute that gets overwritten for select tag. Is there a way the popup can then just stay on without hiding it.?

how to set some options to be preselected?

How to get selected values in an array

HI i was trying to get the selected values in to an arry will you please help me how to get them ....

Allow limiting the number of displayed selected options

When there are a lot of selected options in a multiple selection sol, the display container gets really large. To limit the space used introduce an option like "maxInitialDisplayItems". If that limit is reached show a "+xyz more" link which only displays the other selected items on click

Unsupported characters

When typing in the input and pressing "(", ")" or " ' ", the field is automatically filled with one of the options below. Might there be some unsupported characters for the plugin? Thank you

Extends SearchableOptionList.prototype

Hi,
I'm trying to extends the plugin prototype to add french translation,

Using these lines of codes :

(function ($) {

    $.extend($.SearchableOptionList.prototype.defaults.texts, {
                noItemsAvailable: 'Aucune entrée trouvée',
                selectAll: 'Tous sélectionner',
                selectNone: 'Ne rien sélectionner',
                quickDelete: '&fois;',
                searchplaceholder: 'Cliquez pour une recherche',
                loadingData: 'Chargement des données...',
                itemsSelected: '{$a} Sélections'
    });

})(jQuery);

But I got the error : Cannot read property 'prototype' of undefined

Can someone help me? Is there a translation for this plugin?

Thank you in advance

Change selected items container

I use this plugin a lot. very good plugin indeed. but it would be great if there is a way to allow selected item to be placed in whatever container desired. currently if list is huge and select all of them then it pushes the dropdown to go further below.

Make ajax-search work

Hey,

I just found your nice plugin. In the frontend it is exactly what I was looking for. Sadly there is no method or sth like that to load the search-results via ajax-query with json-result.

This would be REALLY a nice feature!

Best regards,
Florian

Bug:cannot scroll, request:placeholder + position

This project is wonderful, except that:

1 - one bug: if there are many options, and the select box is near top of the page, i can not scroll.

2 - feature request: would it be possible to display selected items inside the select tag, instead of above?, if selected too many items, you can say: 4 items selected. etc

3 - feature request 2: can you get the placeholder info from my original select

Thank in advance.

Uncaught TypeError: Cannot read property 'closeOnClick' of undefined

When performing "select all" or "select none", it outputs the following error:
Select All: Uncaught TypeError: Cannot read property 'closeOnClick' of undefined sol.js - line 996
Select None: Uncaught TypeError: Cannot read property 'closeOnClick' of undefined sol.js - line 1011

How to add options from javascript?

Can somebody help me with an example on how to add items from javascript? Sometimes when I add options they don't appear in the list, if I place and alert('') in the code it the options will show.

data list is huge

My data list is huge 2333 records is there a way to make it faster maybe by searching for ony the first 3 characters?

$(...).searchableOptionList is not a function

Not sure why I keep getting this error. The JS file is correctly placed after jQuery and searchableOptionList is clearly defined. I am using Handlebars and Gulp, not sure if that is causing the issue.

your example page is broken

The examples are broken since a rename of the JavaScript occurred:
http://pbauerochse.github.io/searchable-option-list/examples.html

Update the linked JavaScript file to:
https://rawgit.com/pbauerochse/searchable-option-list/master/sol.js

maxShow option is not working upon page reload

When user selects more than maxShow options then the substitute item "x items selected" is displayed instead all of them.

However when the multiselect loads with many options already selected, they are all displayed. This should be also caught by the maxShow option.

Selection Container width

Right now the selection container is a standard div block element. The selection therefore could be significantly wider than the select itself. Insert an option to allow setting a width

IE8 does not support input event

The input event is not supported in IE8 according to here (it is supported in IE9+):
http://help.dottoro.com/ljhxklln.php

This modification will detect changes on the value property using the propertychange event:

            this.$input
                .focus(function () { self.open(); })
                .on('propertychange input', function (e) {
                    var valueChanged = false;
                    if (e.type=='propertychange') {
                        valueChanged = e.originalEvent.propertyName=='value';
                    } else {
                        valueChanged = true;
                    }
                    if (valueChanged) {
                        self._applySearchTermFilter();
                    }
                });

Integrating with Knockout.js

Need help in writing a custom binding for knockout. Please help

Thanks
Gopal

Add keyboard shortcuts

It would be neat to have support for keyboard shortcuts, e.g. when search-field is focused use up/down arrows to mark options in the list and hitting space selects/ deselects currently marked option.

Single selection display

With a single selection list, the selected item is also displayed above (or below) the select. This uses up two lines of space. For single selects it would be nice, if it looks the same as a regular select and the selected item is being displayed within the search box.

Select a group

Hi, I was looking for a multiselect option and SOL is almost perfect, except for the fact that it's not possible to select a whole group at once. Or am I missing this function on the demo page and documentation?

How to add selected items in the select box itself and how to embed the search box in the dropdown?

How to select multiple on load ?

I am using this api for multiple selection. When adding form it is fine. But i want to edit particular form, I have to display selected item i.e. already saved.

Plz suggest me how to select default in sol api.

SOL is not rendering on the page in IE

Hi,

I find sol really cool and it totally works fine in Chrome.

However, when I open the sol example page with IE 11, the first few examples are not rendering.

Same thing happened in my own project using sol and th error console is attached below.

IE8 doesn't support trim

Was doing some cross-browser testing and IE8 apparently doesn't have trim support which is used a few times.

If you choose to include the trim prototype, you could use this:

if(typeof String.prototype.trim !== 'function') {
  String.prototype.trim = function() {
    return this.replace(/^\s+|\s+$/g, ''); 
  }
}

if you choose to test IE8, you can download a virtual machine image here:
https://www.modern.ie/virtualization-tools

add name attribute to options

If one does not use a select for the data source you still need to have a select, though the empty select will be removed from DOM

Invalid item type found undefined

_loadItemsFromUrl: function (url) {
            var self = this;
            $.ajax(url, {
                success: function (actualData) {
                    self.items = self._invokeConverterIfNeccessary(actualData);
                    if (self.items) {
                        self._processDataItems(self.items);
                    }
                },
                error: function (xhr, status, message) {
                    self._showErrorLabel('Error loading from url ' + url + ': ' + message);
                },
                dataType: 'json' // <-- ADD THIS STRING
            });
        },

Error on reload data when recreating OptionGroups with children

When $alreadyInitializedSol._reloadData fires, and items are to be removed via removeFunction the self._removeSelectionDisplayItem call throws an error (

Cannot read property 'displaySelectionItem' of undefined

) as it tries to find a single checkbox against an optiongroup object with children.
var $inputElement = self.$selection.find(".sol-checkbox[value='"+item.value+"']");

I've edited optionGroups to be deleted/recreated on reload and items re-selected but more of a hack than a proper fix. Any help on this appreciated.

Change style for scrollbar and checkbox

Is there any option, how to change style for scrollbar in large select list and for checkboxes?

how to use getSelection() method

i want to retrieve the selected options .how do i retrieve(get/set) them

sol-inner-container

I cant seem to get other page elements beside the sol. Any suggestions?

if I do this:

.sol-inner-container {
display: inline;
}

then I can get other elements beside the sol but then the sol becomes messed up and un-usable

how to implement auto-hide when using tab or shift-tab

Hi,
I'm trying to auto-hide the SOL component when I leave the '#my-select' input by using tab or shift-tab.
Now I'm doing:

$(function() {
$('#my-select').searchableOptionList({
events: {
onInitialized: function(sol, items) {
this.$input.focusout(function(event) { sol.close(); });
}}});
});

It works nicely when leaving the input '#my-select' but when I "tab" in (or "shift-tab" in) this input again, the options popup shows up but no option can be selected anymore using mouse!

What am I doing wrong?

Thierry.

How to select/unselect options programatically.

Look like there is no API/Method to select/unselect options programatically.

When there is' a disabled option checked on the label allows you to deselect

    addSelectionDisplayItem: function (item, $uiInput) {
        var $displaySelectionItem = $('<div class="sol-selected-display-item" />')
                .html(item.label)
                .attr('title', item.tooltip)
                .appendTo(this.showSelectionContainer);

        if (this.useCheckboxes || this.settings.allowNullSelection) {
          if (!$uiInput.prop('disabled')){ //adding if
            $('<span class="sol-quick-delete" />')
                .html(this.settings.texts.quickDelete)
                .on('click', function () {
                    $uiInput
                        .prop('checked', false)
                        .trigger('change');
                    $displaySelectionItem.remove();
                })
                .prependTo($displaySelectionItem);
            }
        }

        item.displaySelectionItem = $displaySelectionItem;
    }

how to destory SOL from dom?

Hi,
I have used SOL in Single page application, i want to destroy all SOL objects and dom elements after its use is done.

How can i achieve this, is there any method available in SOL.

Thanks,

is it possible to reload data and settings?

once the data is loaded, is it possible to refresh it?
i have several object in my app, and when clicking on one of them, i am displaying the previously selected values for this object.
But when clicking on another object, selected values should change too, i didn't find another way beside remove the div containing sol, and then adding it again.