Loading the Select Box again on clearing the text box field - php

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.

Answer 2

What I'd do here is populate the list with AJAX from that same PHP file, but have it output JSON. On loading the page, the AJAX request would load the php file, get the JSON and add the items in the list.
For refreshing when the text field is blank, you could use an onChange or onKeyUp and check the length of the value.
I think all this would be much simpler in jQuery or any JS framework than pure JS :)
These will help:
http://css-tricks.com/dynamic-dropdowns/
Using jQuery, JSON and AJAX to populate a drop down
Populate dropdown using json
Populate Dropdown Menu in PHP from JSON

Answer 3

You could definitely use AJAX, but for this example, it may not be necessary. It might be more efficient to just store the original contents in a Javascript array and reset it when you need to. I would actually remove the options instead of hiding them:
<script type="text/Javascript">
var originalOptions = {<?php $echo = array(); foreach ($domains as $row) $echo[] = "\"{$row->id}\":\"{$row->domain}\""; echo implode(", ", $echo); ?>};
function filterSelectBox(text)
{
var selectField = document.getElementById('domainID');
selectField.options.length = 0;
for (var key in originalOptions)
{
if (originalOptions[key].substr(0, text.length) == text)
{
var option = document.createElement("option");
option.value = key;
option.text = originalOptions[key];
selectField.add(option, null);
}
}
}
</script>
<select name="domainID" id="domainID" size="15" style="width:175">
<?php foreach ($domains as $row) {
echo "\t<option value=\"{$row->id}\">{$row->domain}</option>\n";
} ?>
</select>
<input type="text" onkeyup="filterSelectBox(this.value)" />