jQuery Searchable Option List Demos

To create this
 
do this
<select id="preinitialized" name="htmltest" multiple="multiple">
    <optgroup label="Gruppe 1" title="Es una grupa con el numéro 1">
        <option value="1" title="Subgroup 1">Subgroup 1</option>
        <option value="2" title="Subgroup 2">Subgroup 2</option>
        <option value="3" title="Subgroup 3">Subgroup 3</option>
        <option value="4" title="Subgroup 4">Subgroup 4</option>
        <option value="5" title="Subgroup 5">Subgroup 5</option>
        <option value="6" title="Subgroup 6">Subgroup 6</option>
        <option value="7" title="Subgroup 7">Subgroup 7</option>
        <option value="8" title="Subgroup 8">Subgroup 8</option>
        <option value="9" title="Subgroup 9">Subgroup 9</option>
        <option value="10" title="Subgroup 10">Subgroup 10</option>
    </optgroup>
    <optgroup label="Gruppe 2" title="Es una grupa con el numéro 2">
        <option value="1" title="Subgroup 1">Subgroup 1</option>
        <option value="2" title="Subgroup 2">Subgroup 2</option>
        <option value="3" title="Subgroup 3">Subgroup 3</option>
        <option value="4" title="Subgroup 4">Subgroup 4</option>
        <option value="5" title="Subgroup 5">Subgroup 5</option>
        <option value="6" title="Subgroup 6">Subgroup 6</option>
        <option value="7" title="Subgroup 7">Subgroup 7</option>
        <option value="8" title="Subgroup 8">Subgroup 8</option>
        <option value="9" title="Subgroup 9">Subgroup 9</option>
        <option value="10" title="Subgroup 10">Subgroup 10</option>
    </optgroup>
    <optgroup label="Gruppe 3" title="Es una grupa con el numéro 3">
        <option value="1" title="Subgroup 1">Subgroup 1</option>
        <option value="2" title="Subgroup 2">Subgroup 2</option>
        <option value="3" title="Subgroup 3">Subgroup 3</option>
        <option value="4" title="Subgroup 4" selected="selected">Subgroup 4</option>
        <option value="5" title="Subgroup 5">Subgroup 5</option>
        <option value="6" title="Subgroup 6">Subgroup 6</option>
        <option value="7" title="Subgroup 7" selected="selected">Subgroup 7</option>
        <option value="8" title="Subgroup 8">Subgroup 8</option>
        <option value="9" title="Subgroup 9">Subgroup 9</option>
        <option value="10" title="Subgroup 10">Subgroup 10</option>
    </optgroup>

    <option value="1" title="Tooltip 1">Option 001</option>
    <option value="2" title="Tooltip 2">Option 002</option>
    <option value="3" title="Tooltip 3">Option 003</option>
    <option value="4" title="Tooltip 4" selected="selected">Option 004</option>
    <option value="5" title="Tooltip 5">Option 005</option>
    <option value="6" title="Tooltip 6">Option 006</option>
    <option value="7" title="Tooltip 7">Option 007</option>
    <option value="8" title="Tooltip 8">Option 008</option>
    <option value="9" title="Tooltip 9">Option 009</option>
    <option value="10" title="Tooltip 10" selected="selected">Option 010</option>
</select>

<script type="text/javascript">
    $(function() {
        $('#preinitialized').searchableOptionList({
            maxHeight: '350px',
            showSelectAll: true
        });
    });
</script>

Initialize empty select with data from array

You can also initialize an empty <select> by passing in an JavaScript array with the initial data.

To create this
 
do this
<select id="notinitialized" name="htmltest" multiple="multiple"></select>

<script type="text/javascript">
    $(function() {
        $('#notinitialized').searchableOptionList({
            data: [
                    { "type": "option", "value": 1, "label": "Eine Option", "selected": true},
                    { "type": "option", "value": 2, "label": "Eine weitere Option"},
                    { "type": "option", "value": 3, "label": "Noch eine weitere Option"}
            ],
            showSelectionBelowList: true
        });
    });
</script>

Initialize select with data loaded from a url

If you provide an url the data will be loaded from that url via an ajax.get call.

To create this
 
do this
<select id="notinitialized_async" name="notinitialized_async"></select>

<script type="text/javascript">
    $(function() {
        $('#notinitialized_async').searchableOptionList({
            data: 'testdata.json'
        });
    });
</script>

Initialize empty select with data from a function

If you need more control you may also pass in a function which then has to return the data to initialize SOL. This enables you to process data retrieved from an url before passing it to SOL

To create this
 
do this
<select id="notinitialized2" name="notinitialized2"></select>
<script type="text/javascript">
    $(function() {
        $('#notinitialized2').searchableOptionList({
            data: function (self) {
                // get and convert the data from the server
                var rawData = loadDataFromServer();
                var dataInSolFormat = convertToSolFormat(rawData);

                return dataInSolFormat;
            },
            showSelectAll: true
        });
    });
</script>










Test getselection | Serialize Form