Filtering a SELECT

by rjurd

HTML

<input type='text' id='mySearch' />
<br/>
<select size='10' id='myList'>
</select>

JavaScript

function CreateList() {
    $('#myList option').remove();

    var elements = "This Boolean attribute indicates that the user cannot interact with the control. If this attribute is not specified, the control inherits its setting from the containing element, for example fieldset; if there is no containing element with the disabled attribute set, then the control is enabled".split(" ");

    for (var i = 0; i < elements.length; i++) {
        $('#myList').append('<option>' + elements[i] + '</option>');
    }
}

$('#mySearch').keyup(function() {
    CreateList();
    $('option').not(':contains(' + $('#mySearch').val() + ')').remove();
});

CreateList();