Browser freeze - How to handle or optimize 50,000 rows in one HTML select element more than several times?

Question

I have an increasing table which already has records of 50,000+. So in a combo box I have to load it, so that it shows which one is selected and its a main record which need to be selected and based on that it spread other relational records. But when I load it the whole web browser freeze.

How do you handle it?

My controllers:

$sql = "select name,name from countryCity";
$secondResult = $this->db->fetchPairs($sql);
$this->view->selectitems = array(''=>'') + $secondResult;

My view file:

<?for($i=0; $i<10; $i++):?>
<?=$this->formSelect("a", 
                     "select one", 
                     array('class'=>'largetosmall'),
                     $this->selectitems)?>

<?endfor;?>

Output:

<select class=largetosmall id=a>
 <option>...</option>
 <option>50,000+++... records</option>
</select>

More than 10 times I have a huge select element in one page. Never working.

Answer 1

50k is simply too many for a drop-down list. Use AJAX-based autocomplete input boxes or split the list to smaller parts, for example by state. I think the users also don't like it, it's really hard to scroll or search in a so huge drop-down list.