Loading the Select Box again on clearing the text box field
<p>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.</p>

<pre><code>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 &lt; optionsLength; i++) {
        if(selectField.options[i].innerHTML.toLowerCase().indexOf(searchValue) &gt;= 0) {
            selectField.options[i].style.display = 'block';
        } else {
            selectField.options[i].style.display = 'none';
        }
    }
}
</code></pre>

<p>Here is HTML Elements associated with the code.</p>

<pre><code>&lt;div class="search_domains" id="search_domains"&gt;
    &lt;input type="text"  id="selectFilter" name="selectFilter" /&gt;
    &lt;input type="button" id="filterButton" value="Filter" onClick="filterSelectBox(this)"/&gt;
&lt;/div&gt;
</code></pre>

<p>and this is how I am populating the Select box,</p>

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