Question

I am new to jQuery and am having some trouble figuring something out.

I have this function that is called at the bottom of the page to attach an auto-complete feature to a text box, this part is working fine. Here is the code that is called to enable the auto-complete:

$(function(){
    $('#intext').autocomplete('get-data.php?mode=sql', {
        width: 400,
        max: 5,
        selectFirst: false
    });
});

However the search box contains two radio buttons for two different types of searches. The auto-complete feature should only be available for one type of search.

So my question is, how can I enable this by clicking one radio button, and disable it by clicking the second radio button?

EDIT

The auto-complete script has a .autocomplete( “disable” ) method, but I don’t know how to enable/disable that based on which radio button is checked.

EDIT 2

I am trying to get the method suggested by “Rory McCrossan” to work, as I am using jQuery UI Autocomplete. Here’s the code for my radio buttons and search box:

News: <input type="radio" class="myRadio" name="search_type" value="news" checked="checked" onclick="this.form.action='/search.php';" />
Media Gallery: <input type="radio" class="myRadio" name="search_type" value="media" onclick="this.form.action='/media.php';" />
<input id="intext" class="txt" type="text" name="searchterms" />

I have the following code in the script that runs on each page:

addAutoComplete($("#intext"));

$(".myRadio").change(function() {
    if ($(this).val() == "news") {
        if (!$("#intext").hasClass("ui-autocomplete-input"))
            addAutoComplete($("#intext"));
    }
    else {
        $("#intext").autocomplete('destroy')
    }
});


function addAutoComplete($el) {
    $('#intext').autocomplete('autocomplete-data.php?mode=sql', {
        width: 400,
        max: 5,
        selectFirst: false
    });

}

This does not seem to work, and the Error Console in Firefox doesn’t show any errors.

Answer 1

Assuming this is the jQueryUI autocomplete, you can use $el.autocomplete("destroy") to remove the autocomplete function.

addAutoComplete($("#intext")); // on load

$(".myRadio").change(function() {
    if ($(this).val() == "a") {
        if (!$("#intext").hasClass("ui-autocomplete-input"))
            addAutoComplete($("#intext"));
    }
    else {
        $("#intext").autocomplete('destroy')
    }
});

function addAutoComplete($el) { 
    $el.autocomplete('get-data.php?mode=sql', {
        width: 400,
        max: 5,
        selectFirst: false
    });
}