jQuery autocomplete disabled makes autocomplete partially transparent, not disabled

Question

I'm using the jQuery UI's "autocomplete" function on a search on my site. When you change a radio button from 'area search" to "name search" I want it to disable the autocomplete, and re-enable it when you switch back. However, when you disable the autocomplete it doesn't hide the dropdown, it just dims it to 20% opacity or so. Here's my javascript:

var allFields = new Array(<?php echo $allFields ?>);

$(document).ready(function() {

    if ($("input[name='searchType']:checked").val() == 'areaCode') {
        $("#siteSearch").autocomplete({
            source: allFields,
            minLength: 2
        });
    }

    $("input[name='searchType']").change(function(){
        if ($("input[name='searchType']:checked").val() == 'areaCode') {
            $( "#siteSearch" ).autocomplete( "option", "disabled", false );
            alert("enabled");
        }
        else {
            $( "#siteSearch" ).autocomplete( "option", "disabled", true );
            alert("disabled");
        }

    });

});

You can see it happening at http://crewinyourcode.com

First you have to chose an area code to search, and then you can see the issue.

EDIT: I realize you have to choose an area code before you're given the option to switch search types. If you go to this URL you'll have both of them immediately: http://crewinyourcode.com/search/choose-category/732/

Answer 1

Just added a CSS rule to display:hidden the autocomplete box. No biggie.