0

in Html i use a Select with Options. If you type into a input field the option will be hide or show if the option text starts with the input text.

$(document).on('keyup', '#modal-newSeriennummer', function () {
    var datalist = $('#serialnumbers')[0].options;
    for (var i = 0; i < datalist.length; i++) {
        if (!datalist[i].text.startsWith($(this).val())) {
            $(datalist[i]).hide();
        } else {
            $(datalist[i]).show();
        }
    }

    var onlyVisible = $('#serialnumbers').find('option:visible');

    if (onlyVisible.length == 1) {
        var key = event.keyCode || event.charCode;
        if (key == 8 || key == 46)
            return;
        $('#serialnumbers').val(onlyVisible.val());
        $(this).val(onlyVisible.html());
        GetSpecificHgData(onlyVisible.val());
    } else {
        $('#serialnumbers').val('');
    }
});

Html:

<input id="modal-newSeriennummer" type="Text" name="newSeriennummern">
<select id="serialnumbers" size="6">
<option value="3bb55850-1884-4f43-85a2-04871ab0a2ff">79523</option>
<option value="dc689af1-abff-4f97-9633-0814d4bbf0ff">19038</option>
<option value="b72c213a-2a81-41d8-8b30-0b14015fb699">29028</option>
<option value="8276cbe9-1394-4448-9b59-0e2e9e9231e4">79193</option>
<option value="0188762d-25ec-41c1-83e2-171cba062050">39259</option>
<option value="e369b23f-3827-4d95-9d90-1b127b0beb8f">22898</option>
</select>

it works fine but not for IE 9. The option tags have the style display none but it want hide.

Konobi
  • 401
  • 1
  • 6
  • 14
  • can you please share whole html code. – Pedram Oct 02 '15 at 10:44
  • 1
    Hiding `option` may not work in all browsers. You'r best bet is to disable them. – lshettyl Oct 02 '15 at 10:47
  • You can't reliably hide `option` elements in all browsers. You should either set them as `disabled` (although they will still be visible) or use a `select` styling library which does allow you to dynamically hide/show options. – Rory McCrossan Oct 02 '15 at 10:49
  • I must hide them. It can be hundreds of Elements and the user must restrict them with the Input field. – Konobi Oct 02 '15 at 11:08

1 Answers1

-1

IE doesn't support style="display:none;"

Instead of option.style.display = 'none' have you tried option.hidden = true;.

You could also:

$("option_to_hide").wrap('<span/>');
$("option_to_hide").unwrap('<span/>');

With the function

jQuery.fn.toggleOption = function( show ) {
    $( this ).toggle( show );
    if( show ) {
        if( $( this ).parent( 'span.toggleOption' ).length )
            $( this ).unwrap( );
    } else {
        if( $( this ).parent( 'span.toggleOption' ).length == 0 )
            $( this ).wrap( '<span class="toggleOption" style="display: none;" />' );
    }
};

And to use it:

$("option_to_toggle").toggleOption(true); // show option
$("option_to_toggle").toggleOption(false); // hide option
Darren Willows
  • 2,053
  • 14
  • 21