jQuery Searchable Option List Demos

<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.

<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.

<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

<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>