Question

I have a Select box and a text box to search through the list in the select box. The Select box is getting populated from a database with PHP. What I am trying to achieve here is as soon as clear the text field; the select box should refresh. I have to reload the whole page to do that. Here is the little script that I using to search through select box.

function filterSelectBox(filterButton) {
    var searchValue = document.getElementById('selectFilter').value.toLowerCase();
    var selectField = document.getElementById("domainID");
    var optionsLength = selectField.options.length;

    for(var i = 0; i < optionsLength; i++) {
        if(selectField.options[i].innerHTML.toLowerCase().indexOf(searchValue) >= 0) {
            selectField.options[i].style.display = 'block';
        } else {
            selectField.options[i].style.display = 'none';
        }
    }
}

Here is HTML Elements associated with the code.

<div class="search_domains" id="search_domains">
    <input type="text"  id="selectFilter" name="selectFilter" />
    <input type="button" id="filterButton" value="Filter" onClick="filterSelectBox(this)"/>
</div>

and this is how I am populating the Select box,

<select name="domainID" id="domainID" size="15" style="width:175">
        <option>Select a Domain</option>
        <? foreach ($domains as $row) {
        ?>
        <option value="<?=$row -> id ?>"><?=$row -> domain ?></option>
        <? } ?>
    </select>

Answer 1

Put this code:

document.getElementById('selectFilter').onkeyup = function() {
    if(this.value.length == 0) {
        var selectField = document.getElementById("domainID");
        var optionsLength = selectField.options.length;

        for(var i = 0; i < optionsLength; i++) {
            selectField.options[i].style.display = 'block';
        }
    }
};

just before the </body> tag in your page, and it will show all of the options when you clear the textbox value.